Loading... 原因:路由模式是**history**模式 解决方案: Nginx配置添加以下代码 location / { index index.html; try_files $uri $uri/ /index.html; } 参考摘录自:[面试官:vue项目如何部署?有遇到布署服务器后刷新404问题吗?][1] 为什么history模式下有问题 Vue是属于单页应用(single-page application) 而SPA是一种网络应用程序或网站的模型,所有用户交互是通过动态重写当前页面,前面我们也看到了,不管我们应用有多少页面,构建物都只会产出一个index.html 现在,我们回头来看一下我们的nginx配置 server { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; } } 可以根据 nginx 配置得出,当我们在地址栏输入 www.xxx.com 时,这时会打开我们 dist 目录下的 index.html 文件,然后我们在跳转路由进入到 www.xxx.com/login 关键在这里,当我们在 website.com/login 页执行刷新操作,nginx location 是没有相关配置的,所以就会出现 404 的情况 为什么hash模式下没有问题 router hash 模式我们都知道是用符号#表示的,如 website.com/#/login, hash 的值为 #/login 它的特点在于:hash 虽然出现在 URL 中,但不会被包括在 HTTP 请求中,对服务端完全没有影响,因此改变 hash 不会重新加载页面 hash 模式下,仅 hash 符号之前的内容会被包含在请求中,如 website.com/#/login 只有 website.com 会被包含在请求中 ,因此对于服务端来说,即使没有配置location,也不会返回404错误 解决方案 看到这里我相信大部分同学都能想到怎么解决问题了, 产生问题的本质是因为我们的路由是通过JS来执行视图切换的, 当我们进入到子路由时刷新页面,web容器没有相对应的页面此时会出现404 所以我们只需要配置将任意页面都重定向到 index.html,把路由交由前端处理 对nginx配置文件.conf修改 server { listen 80; server_name www.xxx.com; location / { index /data/dist/index.html; try_files $uri $uri/ /index.html; } } 修改完配置文件后记得配置的更新 nginx -s reload 这么做以后,你的服务器就不再返回 404 错误页面,因为对于所有路径都会返回 index.html 文件 为了避免这种情况,你应该在 Vue 应用里面覆盖所有的路由情况,然后在给出一个 404 页面 const router = new VueRouter({ mode: 'history', routes: [ { path: '*', component: NotFoundComponent } ] }) [1]: https://cloud.tencent.com/developer/article/1794314 最后修改:2021 年 12 月 07 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 0 如果觉得我的文章对你有用,请随意赞赏