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 初始化参数这四者之间差了一个斜杠或少了一个前缀 —— 它们必须严丝合缝,缺一不可。


















