翻遍 Vite 文档，教你面试官都不会的 3 种前端部署方案

前言什么是 Vite？静态站点的部署流程部署到各种平台使用传统 Web 服务器（如 Nginx）部署到 GitHub Pages 部署到 Vercel 部署到 Netlify 更多部署选项 Vite 的部署注意事项总结

前言

前端开发中，静态站点的部署是一个绕不开的话题。无论是个人博客、产品文档，还是公司官网，静态站点的高效部署都是一项基本技能。

许多前端开发者可能对部署感到畏惧，认为这涉及复杂的服务器配置和运维知识，真是自己吓自己。

实际上，如果你正在使用 Vite 构建前端项目，那么静态站点的部署问题几乎都已经在 Vite 的官方文档里写得清清楚楚了！

最近，笔者给 2048 小游戏做了一些升级：

🎯 经典的 2048 玩法

📱 适配移动端的响应式设计

⌨️ 支持键盘控制（↑↓←→）

👆 支持触屏滑动

🎯 分数记录功能

🔄 随时开始新游戏

现在万事俱备，只需部署。（当然我已经部署好了，大家可以先玩起来：https://2048x-game.netlify.app/）笔者将以部署 2048 为例详细拆解 Vite 文档中的相关内容，带你掌握静态站点部署的要点。

什么是 Vite？

Vite 是一个现代的前端构建工具，以其极速冷启动和高效的模块热更新（HMR）闻名。它基于 ES 模块（ESM），为现代浏览器开发环境量身定制。同时，它也提供了优秀的生产环境构建能力，生成的静态文件可以直接部署到各类平台。

在生产环境下，Vite 会打包生成一组优化后的静态文件。这些文件通常包括：

压缩的 HTML、CSS 和 JS 文件

优化后的资源文件（图片、字体等）

部署的核心就是将这些静态文件放到一个能够被访问的服务器上。

静态站点的部署流程

Vite 的静态站点部署可以总结为以下几步：

安装 Vite 并完成项目开发

运行构建命令生成生产环境文件

将生成的文件上传到部署平台

完成配置并访问站点

Vite 官方文档对这几个步骤进行了详细说明，我们将一一展开。

3. Vite 项目的构建

在部署之前，需要将 Vite 项目构建为生产环境的静态资源。构建命令非常简单：

执行后，Vite 会在项目的 dist 目录下生成生产环境文件。默认情况下，这个目录包含了：

index.html：网站的入口文件

/assets/：包含所有的 JavaScript、CSS 和其他静态资源

构建完成后，你的任务就是将这些文件部署到服务器或托管平台上。

在部署时，笔者已经更新了 Vue 和 React 版本的代码，并上传到了 main 分支：

欢迎 star～ 🌟

部署到各种平台

使用传统 Web 服务器（如 Nginx）

如果你有自己的服务器，可以通过 Nginx 等 Web 服务器部署。以下是简单配置示例：

确保服务器上安装了 Nginx。

将 dist 文件夹中的内容上传到服务器上的某个目录（如 /var/www/my-site）。

配置 Nginx：

4. 重启 Nginx 服务：

完成后，访问 http://my-site.com 就可以看到你的站点了！

部署到 GitHub Pages

GitHub Pages 是托管静态站点的热门选择。Vite 文档中对其支持也非常友好。

确保项目已托管在 GitHub 仓库。（没托管的可以看笔者上一篇）

安装 GitHub Pages 部署工具：

修改 package.json：

在 scripts 中添加：

在 vite.config.ts 更新 base URL：

打包时从环境变量（.env.production）中获取 BASE_URL：

执行构建并部署：

部署命令的本质是构建一个 gh-pages 分支，然后展示这个分支的代码：

完成后，访问 https://<your-username>.github.io/<your-repo> 即可。

这里，我将 React 版本的 2048 打包后的项目部署到此处：https://knight174.github.io/2048-game/

部署到 Vercel

Vercel 是现代化前端部署平台，支持直接托管 Vite 项目。

安装 Vercel CLI：

笔者使用 Github 登录：

部署项目：

Vercel 会自动检测 Vite 项目并完成配置。几秒钟后可以通过分配的域名（https://2048-game-7qaqe0axy-knight174s-projects.vercel.app/）访问站点：

注意：Vercel 部署的站点需要 🪜 或者配置 DNS 域名才可以正常访问～

部署到 Netlify

Netlify 是另一个强大的托管平台，适合部署 Vite 项目。

创建一个 Netlify 账户并登录。笔者使用 GitHub 进行登录：

直接将项目的 Git 仓库连接到 Netlify。

1️⃣ 找到侧边导航栏中的 Sites

2️⃣ 在 Sites 面板中找到「Add new site」，选择「Import an existing project」：

3️⃣ 从 GitHub 部署并选择 2048-game 项目：

进去后，起个响亮的名字。

设置中选择「main」分支作为部署分支：

将构建命令设置为 npm run build ，发布目录设置为 dist ：

注意：由于笔者的 main 分支源码是把三个版本的源码放在一起，位置需要精确指定到 React 版本的目录下：

点击部署按钮，Netlify 会自动完成部署。

完成后，访问 https://2048x-game.netlify.app/ 即可，当然也支持手机版本：

Vite 的部署注意事项

尽管部署 Vite 项目非常简单，但仍有一些细节需要注意：

History 模式的路由配置

如果项目中使用了 Vue Router 或 React Router 的 History 模式，需要配置服务器将所有路径重定向到 index.html。例如，在 Nginx 中使用 try_files 指令。

环境变量

构建时需要确保正确配置 .env 文件，尤其是 VITE_ 开头的变量。

静态资源的路径

如果站点不是部署在域名的根路径下（如 https://example.com/2048-game），需要在 vite.config.js 中设置 base：

总结

说到底，静态站点的部署并没有那么复杂，尤其是在使用 Vite 的情况下。一条 npm run build 命令就能生成可部署的静态资源，而后根据项目需求选择一个托管平台即可。

至于传统 Web 服务器和 Docker 容器化的线上部署，考虑到整个细节比较繁琐，也是大多数公司的部署方式，以后笔者将会以教程的形式发布相关内容。

Docker 本机部署的教程，笔者在去年已经发布，30k 浏览量，0.5k 点赞、1.2k 收藏，欢迎学习：

现在无论是个人博客、产品文档，还是公司官网，哪一个静态网站不会部署呢？其实你都会了！

前言

什么是 Vite？

静态站点的部署流程

部署到各种平台

使用传统 Web 服务器（如 Nginx）

部署到 GitHub Pages

部署到 Vercel

部署到 Netlify

更多部署选项

Vite 的部署注意事项

总结

菠萝的蜜

菠萝的蜜技术圈

关注微信公众号