Vue项目History模式刷新404的根本原因是Nginx按真实路径查找而前端路由未生效；解决关键在Nginx的try_files配置，使非静态资源请求均回退至index.html交由Vue Router处理。
Vue 项目用 History 模式时，刷新 /user/profile 这类页面会 404，根本原因是 Nginx 默认按真实文件路径查找，而这个路径前端才处理。解决它不靠改 Vue 逻辑，关键在 Nginx 的 try_files 配置——让所有非静态资源请求都落到 index.html，交由 Vue Router 接管。
基础配置：三步写对 location 块
这是最常用也最稳妥的写法，放在 server 块内即可：
-
明确指定 root 路径：指向你构建输出的
dist目录，比如root /var/www/my-app/dist; -
用 try_files 按顺序匹配：
location / { try_files $uri $uri/ /index.html; }
•$uri先查真实文件（如/logo.png、/js/app.abc.js）
•$uri/再查同名目录（如/assets/，避免因缺斜杠返回 404）
•/index.html是兜底项，只有前两项都失败才触发 -
不要漏掉 index 指令：加上
index index.html;，确保根路径访问能正确加载入口文件
子路径部署：前后端路径必须对齐
如果项目部署在 https://example.com/admin/ 这样的子路径下，光改 Nginx 不够，前端配置也得同步：
蓝湖代码转vue2.0+element-ui
下载
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
-
Vue CLI 项目：在
vue.config.js中设publicPath: '/admin/' -
Vite 项目：在
vite.config.js中设base: '/admin/' -
Vue Router：创建 history 实例时传入相同路径，如
createWebHistory('/admin/') -
Nginx 配置对应调整：用
location /admin/ { alias /var/www/my-app/dist/; try_files $uri $uri/ /admin/index.html; }
注意这里用alias更合适（结尾带斜杠），且兜底路径要写成/admin/index.html
API 代理共存：防止接口被 try_files 错误回退
生产环境 API 通常走 Nginx 代理，若不单独配置，/api/login 这类请求也会被 try_files 拦下来返回 index.html，导致接口失效：
-
为 API 单独写 location 块，路径需有明确前缀（如
/api/），并放在location /之前或同级： location /api/ { proxy_pass http://127.0.0.1:3000/; proxy_set_header Host $host; }- Nginx 的 location 匹配是“最长前缀优先”，
/api/会比/更早命中，因此不会进入try_files流程 - 确认后端服务已启动，且
proxy_pass地址可连通（可用curl测试）
验证是否生效：看三处关键信号
配置完别急着 reload，先快速验证几个点：
-
静态资源能否直连：打开浏览器，直接访问
https://your-domain.com/js/app.xxxx.js，应返回 JS 文件内容，不是 HTML —— 这说明$uri分支生效了 -
任意路由刷新是否白屏或报错：访问
/about后刷新，页面正常显示且控制台无Unexpected token ' 报错 —— 表明index.html正确加载，JS 也执行了 -
API 请求是否走通：在 Network 面板中查看
/api/xxx请求，Response Headers 应含后端返回的字段（如X-Powered-By），而不是前端 HTML 的Content-Type: text/html
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
