Vue-router history 模式地址请求提示 404 ?

与孤独合葬 · 发表于 2024-3-9 11:38:01

Vue2.x 的老项目，vue-router mode 从 hash 改成 history，
ip 页面的 / 页面正常显示，
/login 页面提示 GET /login 404
和线上部署的项目 nginx 配置成 hash 一样，
我不记得 webpeack 的代理配置还影响这个？

有哪位大佬能解惑一下？

注意！是本地环境！线上环境我直接搜现成的答案就好了
AI 说的很棒，然而并不成功 ....
以前 vue-cli 的时候没有注意本地环境的代理配置还需要额外修改的 ...
我先去用 vue-cli 重新构建一个看看吧

矮油又得瑟了 · 发表于 2024-3-9 11:38:54

需要在Nginx中修改一下配置文件。这个在 vue-router 的文档中有说明的
? HTML5 History 模式 | Vue Router

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！

不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。

所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

# nginx
location / {
try_files $uri $uri/ /index.html;
}