Vue项目在宝塔面板部署出现404，主因是Nginx未配置try_files $uri $uri/ /index.html，导致直接访问或刷新/about等前端路由时，服务器错误地查找物理路径而非返回index.html由Vue Router接管；需手动修改网站配置文件中location /区块，并确保root精确指向dist目录本身，保存后必须点击“重载配置”。
Vue项目在宝塔面板部署失败，90%是因为Nginx没配对try_files，不是打包错了，也不是域名没解析。
为什么直接访问/about会404？
浏览器刷新/about时，Nginx默认去磁盘找/www/wwwroot/your-site/about这个目录或文件——但Vue Router的/about根本不存在物理路径，它只是前端代码里定义的一个路由。真正该返回的只有index.html，由Vue自己接管后续跳转。
- 错误配置：
location / { root /path/to/dist; }—— 没有try_files，Nginx就只认真实文件 - 正确逻辑：先查
$uri（如/js/app.js），再查$uri/（如/static/目录），最后兜底到/index.html - 注意：
root必须指向dist目录本身，不是它的父目录；否则$uri拼接后路径错位
宝塔里怎么加try_files配置？
别进“伪静态”选项卡乱粘贴——那里只生效于location /，且不支持多行或复杂指令。必须手动改Nginx配置文件。
- 路径：网站 → 设置 → 配置文件，在
server { }块内找到location / { }区块 - 替换为：
location / { try_files $uri $uri/ /index.html; } - 确认
root已设为你的dist绝对路径，例如root /www/wwwroot/my-vue/dist; - 保存后点「重载配置」，不是「保存」就完事——Nginx进程必须重新加载规则
静态资源缓存和index.html不能缓存
如果index.html被CDN或浏览器缓存了，用户可能永远看不到新版本的JS/CSS哈希文件，导致白屏或功能异常。
立即学习“前端免费学习笔记（深入）”；
- 给JS/CSS/图片加长期缓存：
location ~* \.(js|css|png|jpg|gif|svg)$ { expires 1y; add_header Cache-Control "public, immutable"; } - 但
index.html必须禁用缓存：在http块里加map $sent_http_content_type $expires { text/html epoch; }，否则宝塔默认的全局缓存策略会把它也缓存 - 别信“加个时间戳就能绕过”，CDN和强缓存会忽略URL参数，只看响应头
代理API时/api/路径别写错
前后端分离项目里，/api/login这类请求必须由Nginx转发给Node服务，而不是让前端发到localhost:3000（浏览器跨域）。
- 在
location / { }上方插入：location ^~ /api/ { proxy_pass http://127.0.0.1:3000/; } -
^~确保优先匹配前缀，避免被location /拦截；末尾的/表示剥离/api/再转发，后端收到的是/login - 宝塔「安全」页面必须放行后端端口（如3000），即使只供本机Nginx访问——Linux防火墙默认拦本地回环以外的通信
- Node进程监听
127.0.0.1:3000，不要用0.0.0.0:3000，后者暴露端口风险高，且宝塔反向代理不需要
最常被跳过的一步：改完Nginx配置后，没检查root路径是否真的指向dist目录，而是指向了dist的父级——这时$uri拼出来是/dist/js/app.js，但文件实际在/js/app.js，必然404。
