45 lines
2.2 KiB
Markdown
45 lines
2.2 KiB
Markdown
# 全站样式消失事故 — 根因与修复（2026-07-21）
|
||
|
||
## 现象
|
||
用户反馈：线上 `http://192.168.1.188:8099`「样式都全没了」。
|
||
|
||
## 根因（部署脚本 bug，非业务代码）
|
||
早前部署使用：
|
||
```
|
||
docker cp /root/avatar-test/run-dist/. avatar-test-frontend:/usr/share/nginx/html/
|
||
```
|
||
这个 `SRC/.` 写法**不可靠**——它把新 JS 拷进容器，却**漏拷了新 CSS**。
|
||
结果是容器内变成「新 JS + 旧 CSS」组合：
|
||
|
||
- Vue `<style scoped>` 的样式靠 `data-v-xxxxxx` 作用域属性匹配；
|
||
- 新 JS 渲染元素用 `data-v-732791c8`，但容器内唯一的 `AvatarCreate-CslCRBwi.css` 是旧构建、用 `data-v-8333551b`；
|
||
- 二者 scope id 不一致 → 样式被浏览器静默丢弃 → **所有页面全站样式失效**。
|
||
|
||
本地 `dist` 同源构建是自洽的（JS scope == CSS scope），证明问题只发生在 `docker cp` 拷贝环节。
|
||
|
||
## 修复
|
||
改用**显式子目录拷贝**（可靠）：
|
||
```
|
||
docker cp /root/avatar-test/run-dist/assets/. avatar-test-frontend:/usr/share/nginx/html/assets/
|
||
docker cp /root/avatar-test/run-dist/index.html avatar-test-frontend:/usr/share/nginx/html/index.html
|
||
```
|
||
整体覆盖后，各页面 JS/CSS 的 scope id 全部对齐：
|
||
- AvatarCreate = `data-v-732791c8`（JS==CSS ✅）
|
||
- AvatarManage = `data-v-007cc632`（JS==CSS ✅）
|
||
- SmsLogin = `data-v-7851357e`（JS==CSS ✅）
|
||
|
||
## 验证（无头浏览器实测）
|
||
- Playwright(chromium) 渲染 `:8099`：控制台 **0 报错**，页面 DOM 正常渲染。
|
||
- computed style 实测：
|
||
- `.hero` 背景 = `linear-gradient(135deg, rgb(249,115,22), rgb(251,146,60), rgb(253,186,116))`（暖色渐变生效）
|
||
- `.feature-card` 背景 = `rgb(255,255,255)`（白卡生效）
|
||
|
||
→ 样式确凿恢复。
|
||
|
||
## 部署铁律（写入项目记忆）
|
||
Vite SPA 部署到 docker nginx 容器，**禁止** `docker cp run-dist/. html/`。
|
||
一律拆成 `assets/.` 与 `index.html` 两条显式拷贝；或先 `rm -rf assets/*` 再 cp。
|
||
每次部署后核对「线上 JS scope id == 同页 CSS scope id」，否则 scoped 样式会静默失效而难以察觉。
|
||
|
||
测试地址：`http://192.168.1.188:8099`（建议硬刷新清掉旧 JS/CSS 缓存）。
|