构建与部署

这一课你将能做到

1. 运行 vite build 产出静态资源，并用 vite preview 本地验收
2. 说明 history 路由在静态托管上需要回退配置
3. 对照 Next.js：Vue+Vite 默认是 CSR 静态资源；本站 platform 是 Next 应用

为什么要学

开发服务器不是上线形态。用户访问的是构建后的 index.html + hashed JS/CSS。
搞不清构建与托管，就会出现「本地好好的，线上白屏/刷新 404」。

先建立图像

npm run build
  → dist/index.html
  → dist/assets/*.js Css（带 hash）
静态托管 / Nginx /对象存储
  → 浏览器下载执行，再请求 /api

项	Vite Vue SPA	本站 Next
默认渲染	客户端	混合 RSC/SSR 等
产出	静态目录	Node 或适配平台
路由	前端 Router	文件系统 + 服务器

跟着做

步骤 1：生产构建

在 Vue 练习项目根目录：

npm run build

应生成 dist/。打开看是否有 index.html 与 assets/。

步骤 2：本地预览

npm run preview

用预览 URL 点一遍路由与刷新。预览比 dev 更接近静态托管行为。

步骤 3：检查环境变量

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

代码里用 import.meta.env.VITE_API_BASE。注意：只有 VITE_ 前缀会打进客户端包——不要塞密钥。

步骤 4：理解 publicPath / base

若站点挂在 https://example.com/app/ 子路径，需配置 Vite base: '/app/'，否则资源 404。
本站若把练习挂到子路径，这是高频坑。

步骤 5：history 回退

使用 createWebHistory 时，刷新 /tracks/vue-essentials 需要服务器返回 index.html。
Nginx 示例直觉：try_files $uri /index.html;
对象存储静态站常有「SPA 模式」开关。

步骤 6：对照部署本站

platform 走 Next 构建与 Node/托管约定，不是简单把 dist 丢 CDN 就结束。
Vue 练习可以上 Vercel/Netlify/Nginx 静态；不要假设与 Next 部署命令相同。

讲清楚要点

1. hash 文件名利于缓存：内容变则文件名变。
2. preview 先于真上线：减少「我以为 build 过了」。
3. API 地址分环境：dev 代理 vs prod 完整域名。