建站老手讳谈的5个源码部署致命坑

　　去年十一月，凌晨三点十七分，我盯着测试机型号是 iPhone 12 Pro 的那台设备，Safari 控制台报错堆栈第三行还卡在 vendor.9a7f3c.js:48212:23——那个位置我上周亲手删过一行 console.warn，结果构建日志里它又回来了，没改 hash，连带把上个月埋的 UTM 参数全干掉了。会议室白板没擦干净，右下角留着三天前跟产品吵架时画的流程图，橡皮擦到一半停了，像句没说完的话。

　　先扔结论：不是环境配错了，不是 CDN 挂了，也不是接口 502；是 build 后 public 目录里 index.html 被 webpack 插件偷偷 inject 了两遍 script 标签，第二遍把第一遍的 defer 干掉了，首屏转圈、按钮点了没反应、控制台一片红——这玩意儿压根不会进 CI 流水线校验，因为 dev server 不会复现，build 产物也压根不校验 script 标签重复性。你打开控制台 Network tab，filter js，看那个 vendor.xxx.js 加载两次，大小一样，initiator 却一个写 webpack:///，一个写 。我截图发群的时候，键盘上 Q 键掉了，按空格代替，敲完才发现少了个斜杠。

文章配图，仅供参考

　　问题复盘从那天下午三点开始。产品经理蹲在工位边说“这个 H5 明早上线，设计刚改完动效”，手指悬在 Figma 页面上划拉，可设计稿标注里根本没标动画触发阈值——他以为 viewport 进入就放，实际是 IntersectionObserver 的 rootMargin 写死了 -100px，iOS Safari 一滚动就断连，白屏持续三秒多，用户早切走了。我翻 git log 找上一次动效提交，记录里只有「fix animation delay」，commit hash 是 3b8d4a1，作者是他自己，但 diff 里只改了 transition-duration，没碰 observer 初始化逻辑。有人端着杯子站了很久，水蒸气糊了半边屏幕，没人去擦。

　　第二个坑藏在 public/index.html 的 base 标签里。我们用相对路径跑活动页，dev 环境跑 localhost:3000 没事，但部署到 oss 前缀是 /2023/11/holiday/ 时，base 写成 ，所有 asset 全挂掉。你检查源码看不出来——因为本地 serve 时浏览器自动补了路径，但真机器访问时 network 面板全是 404，图标、字体、svg 全崩，连 favicon 都变成浏览器默认的地球。我记得那次 deploy 完，后台系统里有个按钮点下去没反馈，查了半天发现 button 的 click handler 绑在 window 上，而 index.html 重载时 window 事件监听器早被清了三次，不是绑定失败，是根本没绑上。谁在背后走过碰了椅子，发出吱呀一声，我抬头看，是运维提着硬盘过来，说备份要延后两小时。

　　第三个是 mock 数据污染真环境。我们用 vite-plugin-mock 开发，.env.development 里写了 VUE_APP_API_BASE=/api，但打包时没关 mock 插件，production 构建产物里硬编码了 /mock/user，而 nginx 配置没 proxy_pass 到 mock server，导致页面请求全进 404。最绝的是：它只在第一次加载触发，第二次 localStorage 缓存了 mock 响应，看起来反而“正常”——这事儿我是在灰度切流后，拿客户手机现场抓包才揪出来的。性能面板里 TTFB 正常，LCP 却死卡在 4.2 秒，直到我在 response header 里看见 x-mock-source: plugin。外卖到了没人去拿，袋子在门口堆了快四十分钟，汤漏出来浸湿了门垫一角。

　　第四个是 CSS in JS 的 scope 泄漏。用了 styled-components，但某次升级把 babel-plugin-styled-components 的 ssr 选项关了，默认启用 displayName，结果 build 出来的 className 全是 sc-bdVaJa 和 sc-AxjAm，开发环境看着 fine，线上却和中台页面的全局样式对冲——他们那边写了 { box-sizing: border-box }，我们组件里用 em 计算 padding，两个 sc- 前缀撞了，em 基准被吃了，字体直接缩一半。我比对过构建产物的 css 文件，同一段 font-size: 1.125rem，render 之后 computed 是 12px，不是 18px。工位的显示器是竖着的，方便看长列表，但我调试这段样式时把它横了过来，来回转了三次。

　　第五个……算了，不说了。上个月我把 package-lock.json 提交记录里某个依赖的 resolved 字段手动改回旧版本号，因为新版本 require 了一个 node_modules 里并不存在的模块，webpack resolve 就跪了——但这事儿不能讲，一讲就是质疑团队 npm 版本管理策略，再说下去就得开流程会。反正现在每次 pre-deploy 脚本里我加了 chmod +x ./scripts/precheck.sh，里面只干一件事：grep -q "resolved.http" node_modules/.pnpm/xxx/node_modules/xxx/package.json || exit 1。这脚本没进主分支，我本地跑，跑了十七次。记不清第几次时，控制台突然跳出 uncaught (in promise) TypeError: Cannot read property 'map' of undefined，来源是 vendors~app.xxxxxx.js 的 23341 行，和去年十一月那一行离得不远，也就差 89 行。

　　明天上午十点，我把这个 precheck.sh 推到内部工具库，叫 check-resolved-http，不带文档，不写 README，只放一行注释：# don’t ask why。如果哪天你发现它突然不 work 了——别问我，去看 commit 7e2c1f8，那个 author 是我，message 写着「临时修 build，勿合并」，push 时间是凌晨两点零七分，IP 地址后面跟着一串 ...，我已经删了登录记录。

（编辑：站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!