打包上线

博客项目写完了，要能在浏览器里给别人访问，还需要构建与部署两步：构建把 .vue 源码编译成浏览器认识的 HTML/CSS/JS 静态文件，部署把这些文件放到公网服务器。Vite 负责构建，Vercel 是流行的免费托管平台之一。本节完整走一遍流程。

构建：npm run build

Vite 项目在 package.json 中已配置好脚本，打包命令为：

npm run build

构建完成后项目根目录生成 dist 文件夹，里面是压缩优化后的静态资源：

dist/
├── index.html
└── assets/
    ├── index-xxx.css
    └── index-xxx.js

dist 就是"成品"，可部署到任意静态服务器。

本地预览验证

部署前先在本地模拟线上环境检查，Vite 提供预览命令：

npm run preview

运行后访问终端提示的地址（默认 http://localhost:4173），把博客的列表、详情、收藏都点一遍，确认无报错再上线。

环境变量：区分开发与生产接口

博客的接口地址在开发与生产环境往往不同，用环境变量管理最省心。项目根目录创建 .env.production：

# .env.production
VITE_API_BASE=https://api.example.com

代码里通过 import.meta.env 读取：

// api 请求封装中
const BASE_URL = import.meta.env.VITE_API_BASE || '/api'
// 构建时自动替换成生产地址
axios.get(`${BASE_URL}/posts`)

注意只有以 VITE_ 开头的变量才会暴露给前端代码。

部署到 Vercel

以 GitHub 仓库为例，把项目交给 Vercel 部署：

  1. 把项目推送到 GitHub 仓库。
  2. 登录 vercel.com，点击 Add New Project，导入该仓库。
  3. Vercel 自动识别 Vite 框架，Build Command 填 npm run build，Output Directory 填 dist。
  4. 点击 Deploy，构建完成后即获得线上地址 https://xxx.vercel.app。 也可以用命令行部署：npm i -g vercel 后执行 vercel --prod。

处理 History 路由刷新 404

博客用了 createWebHistory 模式，直接访问 /post/5 时服务器没有该文件会 404。在根目录加 vercel.json，把路径重写到 index.html：

// vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

加入后重新部署，任意深层链接刷新都不白屏，由前端路由接管页面。

上线后的持续更新

后续每次修改代码并推送 Git 提交，Vercel 都会自动重新构建部署，无需手动操作；也可以把自定义域名绑定到项目，让访问地址更专业。

小结：npm run build 产出 dist 静态文件，环境变量管理接口地址，再部署到 Vercel 并配置路由重写，博客就正式上线了。至此，从创建项目到组件、路由、状态管理再到发布的全流程就完整了。

笔记加载中…

标签：#Vue

返回知识库