第 17 章 · 部署入门：静态站构建与上线
本章目标：在 ch13 Vite 与 ch16 毕业项目 基础上，将 academy-demo 从本地可运行推进到线上可访问——读懂 npm run build 产物、配置 base 与环境变量、选择部署平台并完成一次真实上线。
前置：ch13、ch16；本机 npm run build 已成功。学时：3～4 小时。
17.1 从开发到上线的全景
npm run dev → npm run build → 上传 dist/ → 用户浏览器（HTTPS + CDN）| 阶段 | 命令 | 产出 |
|---|---|---|
| 开发 | npm run dev | 内存编译 + HMR |
| 构建 | npm run build | dist/ 静态包 |
| 验证 | npm run preview | 本地模拟生产 |
| 发布 | OSS / Nginx / Pages | 公网 URL |
行业案例 · 贤紫优选商城：学员作品站采用「Vite 构建 → 对象存储 → CDN」；活动页 CDN 命中率 > 95%，源站带宽成本显著下降。
17.2 npm run build 产物解读
cd academy-demo && npm run builddist/
├── index.html / courses.html / course.html / todo.html
├── favicon.svg、mock/courses.json # 来自 public/
└── assets/
├── index-a3f2b1c4.js
├── style-7c4e9a11.css
└── logo-2b8f6d3e.svgindex.html 变化
| 开发 | 生产 |
|---|---|
<script src="/src/main.js"> | <script src="/assets/index-a3f2b1c4.js"> |
| 无独立 CSS 链接 | <link href="/assets/style-xxx.css"> |
| 要点 | 说明 |
|---|---|
| hash 文件名 | 内容变则 hash 变，可长期缓存 |
| 多 HTML 入口 | ch16 四页各自引用对应 chunk |
crossorigin | 配合 CDN / SRI（可选） |
assets hash 与缓存
| 资源 | 缓存建议 |
|---|---|
.js / .css（带 hash） | max-age=31536000, immutable |
index.html | no-cache，确保引用最新 chunk |
mock/*.json | 按更新频率 1h～24h |
原理：HTML 是入口清单；发版只换 HTML 与新 hash 文件即可。
Source Map
// vite.config.js
build: { sourcemap: true } // false | true | 'hidden'| 模式 | 说明 |
|---|---|
false | 体积最小，线上难定位行号 |
true | 生成 .map，浏览器可还原源码 |
hidden | 有 map 但不暴露在 JS 末尾，供监控平台 |
公开站避免上传完整 source map，防止业务逻辑泄露。
17.3 本地 preview 与 base 配置
npm run preview # 默认 http://localhost:4173| 对比项 | dev | preview |
|---|---|---|
| 服务内容 | 源码 + HMR | dist/ |
| 环境变量 | .env.development | 构建时已注入 .env.production |
| proxy | 可用 | 不可用 |
答辩前务必 preview 走通：首页 → 列表 → 详情 → 待办。
子路径部署须设 base（如 https://academy.xianzi.com/academy-demo/）：
// vite.config.js
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd(), '');
return { base: env.VITE_BASE_PATH || '/' };
});# .env.production
VITE_BASE_PATH=/academy-demo/| 场景 | base | 资源路径示例 |
|---|---|---|
| 根域名 | / | /assets/index-xxx.js |
| 子目录 | /academy-demo/ | /academy-demo/assets/... |
| GitHub Pages | /repo-name/ | /repo-name/assets/... |
base 须以 / 开头和结尾，与 Nginx location、OSS 托管路径一致。
17.4 部署方式对比
| 方式 | 优点 | 缺点 | 学员推荐 |
|---|---|---|---|
| OSS / COS | 便宜、可扩展、HTTPS | 需配 CDN、路由规则 | ★★★★★ |
| Nginx | 灵活、可反代 API | 需运维 | ★★★★ |
| GitHub Pages | 免费、CI 友好 | 国内慢、须配 base | ★★★ |
| 小紫云计算静态托管 | 学院账号一键发布 | 按配额 | ★★★★★ |
OSS 步骤：建 Bucket → 静态网站托管 → 上传 dist 全部内容 → 绑域名 + CDN + HTTPS。
GitHub Pages CI 要点：
- run: npm ci && npm run build
env: { VITE_BASE_PATH: /academy-demo/ }
- uses: peaceiris/actions-gh-pages@v3
with: { publish_dir: ./dist }小紫云：关联仓库 → 构建 npm ci && npm run build → 输出 dist → 配置 VITE_API_BASE、VITE_BASE_PATH → 获得 *.xianzi-cloud.cn 预览域。
17.5 Nginx 配置示例
子路径 /academy-demo/，物理目录 /var/www/academy-demo/dist：
server {
listen 443 ssl http2;
server_name academy.example.com;
ssl_certificate /etc/nginx/ssl/fullchain.pem;
ssl_certificate_key /etc/nginx/ssl/privkey.pem;