history模式刷新404是Nginx未配置fallback规则所致；静态资源路径错乱源于base与root不匹配，而非文件上传错误；try_files必须置于location /块内，因其作用范围严格受限于该location匹配规则。
直接说结论：history 模式刷新 404 不是 Vue 的 bug，是 Nginx 没配对 fallback 规则；静态资源路径错乱往往因为 base 和 root 不匹配，不是文件传错了。
为什么 try_files $uri $uri/ /index.html 必须加在 location / 块里
这个指令本质是告诉 Nginx：“当请求的文件或目录不存在时，别急着返回 404，先兜底到 /index.html，让 Vue Router 自己处理路由”。但它的生效范围严格受限于所在 location 块的匹配规则。
- 如果写在
location /api/里，它只对/api/xxx生效，对/about完全无效 - 如果漏掉
$uri/（即目录形式），访问/user/这类结尾带斜杠的路径会直接 404 - 如果
/index.html写成index.html（缺前导斜杠），Nginx 会按相对路径查找，大概率报 404 或 500 -
宝塔面板「伪静态」模板里选「Vue.js」看似省事，但它硬编码了
root路径，一旦你把 dist 放在子目录（比如/www/wwwroot/myapp/dist），而没同步改root，就会白配
root 和 base 怎么对齐才不丢 JS/CSS 文件
Vue 打包后生成的 index.html 里，js/app.xxx.js 这些路径是相对的。它们能否正确加载，取决于两个变量是否咬合：
-
nginx的root指令：定义 URL 根路径映射到服务器哪个物理目录（例如root /www/wwwroot/myapp/dist;） - Vue 的
vite.config.js或vue.config.js中的base配置：决定所有静态资源 URL 的公共前缀（默认'/'，若部署在子路径如/admin/，则需设为'/admin/'） - 常见错配现象：
root指向/dist，但base写成'/myapp/'→ 浏览器请求/myapp/js/app.xxx.js，Nginx 在/dist/myapp/js/下找，自然 404 - 安全做法：除非必须用子路径部署，否则统一用
base: '/'，并确保root直接指向dist目录本身（不是它的父目录）
静态资源缓存和 no-transform 为什么不能省
JS/CSS 文件一旦被 CDN 或中间代理篡改（比如压缩、转码、注入脚本），Vue 应用极大概率白屏或报错。Nginx 层的缓存控制是第一道防线。
-
expires 1y和Cache-Control "public, no-transform"必须同时加在静态资源location块里，单设一个效果打折 -
no-transform是关键：明确禁止任何中间节点修改响应体，防止某些老旧 CDN 把.js强制 gzip 导致 MIME 类型错乱 - 别用
if ($request_filename ~* \.(js|css)$) { ... }这种写法 —— Nginx 官方已标记为“不推荐”，容易引发重写冲突 - 检查是否生效：浏览器 Network 面板看
js/app.xxx.js的响应头，必须同时包含Cache-Control和Expires，且状态码是 200（非 304）
子目录部署（如 /app/）时最容易忽略的三件事
宝塔默认配置只适配根域名部署。一旦你要把 Vue 项目放在子路径下（比如 https://example.com/app/），光改 base 和 root 远远不够。
-
location必须显式声明前缀：location /app/ { alias /www/wwwroot/myapp/dist/; try_files $uri $uri/ /app/index.html; }—— 注意这里用alias而非root，且末尾斜杠不能少 -
try_files的兜底路径得带上子路径：/app/index.html，否则会去根目录找/index.html - Vue Router 初始化时，
createWebHistory的参数必须与部署路径一致：createWebHistory('/app/')，否则路由匹配永远失败 - 宝塔「伪静态」模板完全不支持子目录场景，强行套用只会让所有静态资源 404
真正卡住人的从来不是某一行配置，而是 base、root、location 匹配路径、Router history 初始化参数这四者之间差了一个斜杠或少了一个前缀 —— 它们必须严丝合缝，缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
