打包上线

博客功能已经完成，但它还只能跑在本地开发服务器上，别人无法访问。上线需要两步：先把项目构建成静态文件，再把它们托管到服务器。本章先用 Vite 完成打包，再把博客部署到 Vercel——它对 React 支持好，免费额度足够个人博客使用。

为什么选 Vercel

Vercel 是面向前端的托管平台：能自动识别 Vite/React 工程、一键部署、自带 HTTPS 与全球 CDN，还支持"git push 即自动发布"。个人项目零成本、零运维，最适合博客这类静态站点。

本地构建

开发时用的 npm run dev 不会压缩代码，不能直接上线。构建（build）会编译 JSX、压缩合并代码，产出可部署的静态文件：

npm run build

看到 build complete 的提示后，项目根目录下生成的 dist 文件夹就是上线成品。

本地预览

部署之前先在本地检查成品有没有问题：

npm run preview

浏览器访问提示的地址（默认 http://localhost:4173），效果应与开发时一致。确认无误再进入下一步。

部署到 Vercel

网页操作只需三步：

  1. 把项目推送到 GitHub：git init、git add .、git commit、git push。
  2. 打开 vercel.com，用 GitHub 账号登录，点击 Add New → Project，导入博客仓库。
  3. Framework Preset 会自动识别为 Vite，设置都不用改，直接点 Deploy。

几十秒后，博客就会出现在 https://项目名.vercel.app 上。之后每次 push 代码，Vercel 都会自动重新部署。

用 Vercel CLI 部署（可选）

不习惯网页操作的话，也可以安装命令行工具直接部署：

npm i -g vercel        # 全局安装 vercel 命令行
vercel                 # 首次运行：按提示登录并关联项目
vercel --prod          # 发布到生产环境

CLI 与网页方式效果相同，适合习惯终端的开发者；两种方式发布后都会得到同样的 https 地址。

处理路由刷新 404

博客用的是 BrowserRouter，直接访问 /post/1 这类二级地址时，服务器找不到对应文件会返回 404。解决办法：在项目根目录新建 vercel.json，把所有请求都重写到 index.html，交给前端路由处理：

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

保存后重新 push 一次，刷新和直接访问二级地址就都正常了。

小结

上线流程 = 构建（npm run build）→ 预览（npm run preview）→ 部署（Vercel 导入 GitHub 仓库）→ 路由重写。至此，从创建项目到打包上线，整个博客项目的完整闭环就打通了。

笔记加载中…

标签：#React

返回知识库