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配置文件。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• 路径：网站 → 设置 → 配置文件，在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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！