# 前言前端开发中，静态站点的部署是一个绕不开的话题。无论是**个人博客**、**产品文档**，还是**公司官网**，静态站点的高效部署都是一项基本技能。许多前端开发者可能对部署感到畏惧，认为这涉及复杂的服务器配置和运维知识，真是自己吓自己。

美人鱼的夏天.png

实际上，如果你正在使用 [Vite](https://vitejs.dev/) 构建前端项目，那么静态站点的部署问题几乎都**已经在 Vite 的官方文档里写得清清楚楚了！** 最近，笔者给 2048 小游戏做了一些升级： * 🎯 经典的 2048 玩法 * 📱 适配移动端的响应式设计 * ⌨️ 支持键盘控制（↑↓←→） * 👆 支持触屏滑动 * 🎯 分数记录功能 * 🔄 随时开始新游戏现在万事俱备，只需部署。（当然我已经部署好了，大家可以先玩起来：）接下来，笔者将详细拆解 Vite 文档中的相关内容，带你掌握静态站点部署的要点。

欢迎加入[技术交流群](https://juejin.cn/user/2154698521972423/pins "https://juejin.cn/user/2154698521972423/pins")。 # **什么是 Vite？** Vite 是一个现代的前端构建工具，以其极速冷启动和高效的模块热更新（HMR）闻名。它基于 ES 模块（ESM），为现代浏览器开发环境量身定制。同时，它也提供了优秀的生产环境构建能力，生成的静态文件可以直接部署到各类平台。在生产环境下，Vite 会打包生成一组优化后的静态文件。这些文件通常包括： * 压缩的 HTML、CSS 和 JS 文件 * 优化后的资源文件（图片、字体等）部署的核心就是将这些**静态文件**放到一个能够被访问的**服务器**上。 # **静态站点的部署流程** Vite 的静态站点部署可以总结为以下几步： 1. **安装 Vite 并完成项目开发** 2. **运行构建命令生成生产环境文件** 3. **将生成的文件上传到部署平台** 4. **完成配置并访问站点** Vite 官方文档对这几个步骤进行了详细说明，我们将一一展开。 **3. Vite 项目的构建** 在部署之前，需要将 Vite 项目构建为生产环境的静态资源。构建命令非常简单： ```bash npm run build ``` 执行后，Vite 会在项目的 `dist` 目录下生成生产环境文件。默认情况下，这个目录包含了： * `index.html`：网站的入口文件 * `/assets/`：包含所有的 JavaScript、CSS 和其他静态资源构建完成后，你的任务就是将这些文件部署到服务器或托管平台上。在部署时，笔者已经更新了 Vue 和 React 版本的代码，并上传到了 main 分支： ![追加了 Vue 和 React 版本.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/aac988884f0c4dc1bb85d66f89ae2957~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6JCd55qE6Jyc:q75.awebp?rk3s=f64ab15b&x-expires=1768430240&x-signature=ULoY%2Bp1VrtH43SCdB55gg5gXAE0%3D) 欢迎 star ～ 🌟 # **部署到各种平台** ## **使用传统 Web 服务器（如 Nginx）** 如果你有自己的服务器，可以通过 Nginx 等 Web 服务器部署。以下是简单配置示例： 1. 确保服务器上安装了 Nginx。 2. 将 dist 文件夹中的内容上传到服务器上的某个目录（如 **/var/www/my-site**）。 3. 配置 Nginx： server { listen 80; server_name my-site.com; root /var/www/my-site; index index.html; location / { try_files $uri /index.html; } } 4\. 重启 Nginx 服务： ```bash sudo systemctl restart nginx ``` 完成后，访问就可以看到你的站点了！ ## **部署到 GitHub Pages** GitHub Pages 是托管静态站点的热门选择。Vite 文档中对其支持也非常友好。 1. 确保项目已托管在 GitHub 仓库。（没托管的可以看笔者上一篇） 2. 安装 GitHub Pages 部署工具： ```bash npm install gh-pages --save-dev ``` 1. 修改 `package.json`：在 `scripts` 中添加： ```json "scripts": { "build": "vite build", "deploy": "gh-pages -d dist" } ``` 1. 在 `vite.config.ts` 更新 base URL： ```diff // ... export default defineConfig({ + base: process.env.VITE_BASE_URL || '/', plugins: [react()], }); ``` 打包时从环境变量（.env.production）中获取 `BASE_URL`： VITE_BASE_URL=/2048-game/ 1. 执行构建并部署： ```bash # 构建 npm run build # 部署 npm run deploy ``` 部署命令的本质是构建一个 gh-pages 分支，然后展示这个分支的代码： ![gh-pages 分支.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2aa20a3f77f74bcea86f33708cfe52a4~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6JCd55qE6Jyc:q75.awebp?rk3s=f64ab15b&x-expires=1768430240&x-signature=jJdyPHD8kl14MtdczTcdeuUheQc%3D) 完成后，访问 `https://.github.io/` 即可。这里，我将 React 版本的 2048 打包后的项目部署到此处：

gh-pages 部署 2048 game.png

## **部署到 Vercel** [Vercel](https://vercel.com/) 是现代化前端部署平台，支持直接托管 Vite 项目。 1. 安装 Vercel CLI： ```bash npm install -g vercel ``` 2. 登录 Vercel： ```bash vercel login ``` 笔者使用 Github 登录： ![vercel login.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/42c3052719164180a7e90b2bf8b7ff3d~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6JCd55qE6Jyc:q75.awebp?rk3s=f64ab15b&x-expires=1768430240&x-signature=ks%2F1RyAMIOlV2k0XpWY%2FazIAhz4%3D) 3. 部署项目： ```bash vercel ``` Vercel 会自动检测 Vite 项目并完成配置。几秒钟后可以通过分配的域名（）访问站点： ![vercel 执行.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/88103fa67c9044f4813b9f2c92ea2b63~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6JCd55qE6Jyc:q75.awebp?rk3s=f64ab15b&x-expires=1768430240&x-signature=mSKekO2lZVfRNjfZbEDQMdagLrE%3D) **注意**：Vercel 部署的站点需要 🪜 或者配置 DNS 域名才可以正常访问～ ## **部署到 Netlify** [Netlify](https://www.netlify.com/) 是另一个强大的托管平台，适合部署 Vite 项目。 1. 创建一个 Netlify 账户并登录。笔者使用 GitHub 进行登录：

2. 直接将项目的 Git 仓库连接到 Netlify。 1️⃣ 找到侧边导航栏中的 Sites

侧边导航栏.png

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

添加新网站 > 引入一个现有项目.png

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

部署项目的方式.png

![选择 2048-game.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/78728521ade040afab5ce199a436a410~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6JCd55qE6Jyc:q75.awebp?rk3s=f64ab15b&x-expires=1768430240&x-signature=XLJEtNm3acP8Spocw4TWDrqaxr8%3D) 3. 进去后，起个响亮的名字。 ![Site name.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/d413b942ff60479a8911225f4fe2797f~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6JCd55qE6Jyc:q75.awebp?rk3s=f64ab15b&x-expires=1768430240&x-signature=HpRqkBQB1waI8zmg87fD1AtFDbs%3D) 4. 设置中选择「main」分支作为部署分支： ![选择 main 分支.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/2436a0a22fcb41b29b20ca060f554259~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6JCd55qE6Jyc:q75.awebp?rk3s=f64ab15b&x-expires=1768430240&x-signature=YvMx9FRrEb%2Fw5nHZAXI8OROxcl0%3D) 5. 将构建命令设置为 `npm run build` ，发布目录设置为 `dist` ： ![构建命令和发布目录设置.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/465b2fec4f604f9ebbe8425c56c9cbec~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6JCd55qE6Jyc:q75.awebp?rk3s=f64ab15b&x-expires=1768430240&x-signature=5vFgMgFmSxYCfT4VwXVijdlC9QI%3D) 注意：由于笔者的 main 分支源码是把三个版本的源码放在一起，位置需要精确指定到 React 版本的目录下：

部署设置调整.png

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

点击部署.png

部署中.png

完成后，访问即可，当然也支持手机版本：

h5 端.png

## **更多部署选项** Vite 文档还涵盖了其他平台的部署方法，比如： * Cloudflare Pages * AWS S3 + CloudFront * Google Cloud Storage * Firebase Hosting 无论选择哪个平台，都可以通过文档找到具体操作步骤。大家加油！ ## **Vite 的部署注意事项** 尽管部署 Vite 项目非常简单，但仍有一些细节需要注意： 1. **History 模式的路由配置** 如果项目中使用了 Vue Router 或 React Router 的 History 模式，需要配置服务器将所有路径重定向到 `index.html`。例如，在 Nginx 中使用 `try_files` 指令。 location / { try_files $uri /index.html; } 2\. **环境变量** 构建时需要确保正确配置 `.env` 文件，尤其是 `VITE_` 开头的变量。 VITE_BASE_URL=/2048-game/ 3\. **静态资源的路径** 如果站点不是部署在域名的根路径下（如），需要在 `vite.config.js` 中设置 `base`： ```tsx export default { base: '/2048-game/', }; ``` # **总结** 说到底，静态站点的部署并没有那么复杂，尤其是在使用 Vite 的情况下。一条 `npm run build` 命令就能生成可部署的静态资源，而后根据项目需求选择一个托管平台即可。至于传统 Web 服务器和 Docker 容器化的线上部署，考虑到整个细节比较繁琐，也是大多数公司的部署方式，以后笔者将会以教程的形式发布相关内容。 Docker 本机部署的教程，笔者在去年已经发布，30k 浏览量，0.5k 点赞、1.2k 收藏，欢迎学习： [![前端工程师也应该了解的docker.png](https://p9-xtjj-sign.byteimg.com/tos-cn-i-73owjymdk6/dcf2b6b0566640f69d1640bc90a86059~tplv-73owjymdk6-jj-mark-v1:0:0:0:0:5o6Y6YeR5oqA5pyv56S-5Yy6IEAg6I-g6JCd55qE6Jyc:q75.awebp?rk3s=f64ab15b&x-expires=1768430240&x-signature=zr5To62WZvwxU4seW0mn6HDlCXw%3D)](https://juejin.cn/post/7250029395023544376) 现在无论是**个人博客**、**产品文档**，还是**公司官网**，哪一个静态网站不会部署呢？其实你都会了！