Day 92 · 生产构建与部署 — 还掉 history 回退的账：让陌生人看到你的大屏

收官周第一个工程日：把大屏部署到可访问的线上地址。核心是三件事：生产构建（vite build 与开发模式的差异）、history 路由的回退配置（Day 78 欠的账）、数据服务器的部署策略（静态站与 WS 服务的关系）。今天结束时，你要能把一个 URL 发给朋友，对方手机打开就能看到轮播中的大屏。

一、生产构建：build 与 dev 的三个差异

npm run build     # 产物在 dist/

1.1 差异清单（心里要有数）

维度	dev 模式	build 产物
模块加载	ESM 按需请求（无打包）	打包 + 压缩 + hash 文件名
错误提示	友好警告/完整堆栈	静默（生产模式警告关闭）
依赖处理	每次现场解析	预打包 vendor 分块

1.2 构建前的自查

□ vue-tsc 零报错（build 自带类型检查——Week 11 起的每日回归攒的红利）
□ 环境变量：WS 地址不能写死 localhost（见坑 3）
□ console.log 清理（或用 drop 配置）
□ 无 dev-only 代码泄漏（auditTopoConfig 这类调试工具不进生产）

二、history 回退：404 的解法

2.1 问题复现（Day 78 坑 4 的现场）

现象：部署后首页正常，但：
  - 直接访问 https://xxx.com/c → 404
  - 在 /b 页面按 F5 → 404
原因：createWebHistory 的 URL 是"假路径"——服务器上并没有 /c 这个文件，
      静态服务器按字面找文件，找不到就 404

2.2 回退方案（按服务器类型选）

# 方案 1：Nginx（自有服务器/VPS）
location / {
  try_files $uri $uri/ /index.html;   # 找不到的路径全部回退到入口
}

# 方案 2：Vercel —— vercel.json
{
  "rewrites": [{ "source": "/(.*)", "destination": "/index.html" }]
}

# 方案 3：Netlify —— netlify.toml 或 _redirects 文件
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

# 方案 4：GitHub Pages —— 不支持 SPA 回退（404.html hack 可用但丑）
#        若必须用 GH Pages：改 hash 模式（createWebHashMode，URL 带 #）

选型建议：本周选 Vercel 或 Netlify（免费、零配置负担、适合作品集）；公司场景 Nginx 是标配（面试常问 try_files 一行，值得背下来）。

三、部署实操：两条路线

路线 A：纯静态演示模式（今天的默认路线）

大屏项目有个特殊性：数据服务器是本地 Node 进程。纯静态托管只发静态文件，WS 服务器怎么办？——分场景（第四节详述）。演示路线的做法：

1. npm run build → dist/
2. dist/ 拖到 Vercel/Netlify（或 npx vercel 一条命令）
3. 线上版跑"演示数据模式"——断线重连会触发（无 WS）→ 状态灯红
   ❌ 这不行——大屏打开就满屏红，演示效果负分

解法：演示模式适配——为线上部署加一个"无后端降级"：

// src/services/data-link.ts（追加演示模式）
/**
 * 演示模式：无 WS 服务器时的本地数据仿真
 * 纪律（Day 63）：仅演示站启用，由 URL 参数显式开启——
 *   https://xxx.com/?demo=1 → 演示模式；默认仍连真实 WS
 * 生产/开发环境绝不默认模拟数据（用户规则铁律）
 */
import { SIMULATOR } from "../core/demo-simulator";   // 第 8 周的模拟器回流复用

export function startDataLink(sink: DataLinkSink): void {
  if (source) return;

  const demoMode = new URLSearchParams(location.search).has("demo");
  if (demoMode) {
    // 演示模式：本地模拟器直接喂 sink（同协议同频率，含告警注入）
    SIMULATOR.subscribe((snap) => sink.onSnapshot(snap));
    SIMULATOR.start();
    sink.onConnState("connected");   // 演示模式视为已连接（状态灯绿）
    return;
  }

  source = new WsDataSource();       // 真实链路原样
  /* Day 81 原样 */
}

路线 B：全栈部署（VPS/Docker，进阶了解）

前端 dist/ 由 Nginx 托管 + WS 服务器常驻：
  - VPS：pm2 起 server/index.js，Nginx 反代 /ws 到 WS 端口
  - 或 Docker Compose：nginx + node 两个容器
本周不实施——记入阶段 3 待办（真实求职作品建议届时补全栈部署）

四、数据服务器的部署策略

三个场景的决策表（今天想清楚，写进 README 的部署节）：

场景	数据源	适用
本地开发	本地 WS server	日常开发（现状）
线上演示	`?demo=1` 本地仿真	作品集传播（今天）
线上真实	VPS 全栈部署	求职冲刺版（阶段 3）

这个决策表本身就是工程能力的展示——README 里写清三种模式，比"只演示好看的"诚实，比"只讲理论的"落地。

五、部署后全链路验证

不是"能打开"就算完——路由三件套 + 数据 + 容错全过：

□ 首页加载：/ → 重定向 /a → 入场动效 + 演示数据 1s 内到位（状态灯绿）
□ URL 三件套（回退配置的验收）：
   □ 直接访问 /c → 拓扑屏正常（不 404）
   □ /b 按 F5 → 停留监控屏（回退生效）
   □ 后退键 → 逐屏回退
□ 移动端开流量访问：布局 scale 适配（竖屏会两侧留黑——正常，大屏是横屏设计）
□ 演示模式验证：告警会周期性出现（模拟器注入）→ 弹窗三联动（暂停/拦截/置顶）
□ 分享给一个朋友：不解释任何东西，对方自己看到轮播跑起来

六、常见坑点

坑 1：部署后白屏（base 路径）

Vercel/Netlify 根路径部署一般无事；子路径部署（如 GH Pages 的 /repo/）资源 404 白屏。修复：vite.config.ts 的 base: "/repo/"。

坑 2：模拟器越界（违反用户铁律）

?demo=1 忘了门闩，把演示模式做成默认——开发和生产环境绝不能默认模拟数据。今天的实现里 URLSearchParams 判断是显式开关；自查：不带参数访问线上站，应尝试连 WS（状态灯短暂黄后红）而不是悄悄出假数据。

坑 3：WS 地址写死 localhost

new WebSocket("ws://localhost:9000") 在线上永远连不上。正确：环境变量化——

// .env.production：VITE_WS_URL=wss://你的域名/ws
const wsUrl = import.meta.env.VITE_WS_URL ?? "ws://localhost:9000";

（今天演示模式不连 WS，但代码要留对——阶段 3 全栈部署直接用。）

坑 4：构建产物含 sourcemap

默认 build 不含 map（好事）；若曾开过 sourcemap: true 调试忘了关，线上会暴露源码结构。上线前检查 dist 体积异常。

坑 5：缓存地狱

更新部署后朋友看到的还是旧版（CDN 缓存）。Vite 的 hash 文件名解决了资源缓存，但 index.html 本身要配 no-cache（Vercel/Netlify 默认合理；Nginx 需手动）。

七、自测挑战

T1 · 构建与部署（70 分钟）

完成第一至三节：build 绿、Vercel/Netlify 上线、?demo=1 演示模式生效、路由三件套（直达/刷新/后退）全过。产出：一个可分享的 URL。

T2 · 全链路验证（30 分钟）

第五节清单逐项打勾；重点验证坑 2 的门闩（不带参数不悄悄出假数据）。手机实测一次。

T3 · 部署文档（20 分钟）

README 增补"部署"节：三种数据模式决策表 + 命令清单。这份文档是"陌生人两条命令跑起来"承诺的线上版。

八、总结

环节	要点
build 差异	打包/压缩/静默——心里有数再排错
history 回退	try_files / rewrites / redirects——按服务器选
演示模式	?demo=1 显式开关，本地仿真回流复用
数据策略	三场景决策表入 README——诚实且落地
验收	URL 三件套 + 朋友盲测

大屏第一次跑在公网上。明天给产物瘦身：bundle 分析与首屏指标。

【阶段2收官】day92-build-deploy