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

前言

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

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

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

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

• 🎯 经典的 2048 玩法
• 📱 适配移动端的响应式设计
• ⌨️ 支持键盘控制（↑↓←→）
• 👆 支持触屏滑动
• 🎯 分数记录功能
• 🔄 随时开始新游戏

现在万事俱备，只需部署。（当然我已经部署好了，大家可以先玩起来：2048x-game.netlify.app/）

接下来，笔者将详细拆解 Vite 文档中的相关内容，带你掌握静态站点部署的要点。

欢迎加入技术交流群。

什么是 Vite？

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

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

• 压缩的 HTML、CSS 和 JS 文件
• 优化后的资源文件（图片、字体等）

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

静态站点的部署流程

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

1. 安装 Vite 并完成项目开发
2. 运行构建命令生成生产环境文件
3. 将生成的文件上传到部署平台
4. 完成配置并访问站点

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

3. Vite 项目的构建

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

npm run build

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

• index.html：网站的入口文件
• /assets/：包含所有的 JavaScript、CSS 和其他静态资源

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

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

欢迎 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 服务：

sudo systemctl restart nginx

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

部署到 GitHub Pages

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

1. 确保项目已托管在 GitHub 仓库。（没托管的可以看笔者上一篇）
2. 安装 GitHub Pages 部署工具：

npm install gh-pages --save-dev

1. 修改 package.json：

在 scripts 中添加：

"scripts": {
  "build": "vite build",
  "deploy": "gh-pages -d dist"
}

1. 在 vite.config.ts 更新 base URL：

// ...

export default defineConfig({
+ base: process.env.VITE_BASE_URL || '/',
  plugins: [react()],
});

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

VITE_BASE_URL=/2048-game/

1. 执行构建并部署：

# 构建
npm run build
# 部署
npm run deploy

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

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

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

部署到 Vercel

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

1. 安装 Vercel CLI：

npm install -g vercel

2. 登录 Vercel：

vercel login

笔者使用 Github 登录：

3. 部署项目：

vercel

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

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

部署到 Netlify

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

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

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

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

   

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

   

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

   

   

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

   

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

   

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

   

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

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

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

更多部署选项

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. 静态资源的路径

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

export default {
  base: '/2048-game/',
};

总结

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

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

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

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