風舞/木shiyo
204 字
1 分钟
- 次阅读
SPA（单页应用）404路由问题
当Vue Router使用了history模式时，Vue Router会改变URL而不会重新加载页面，但是当我们直接访问子路由或者刷新子路由时，浏览器会向服务器请求这个路径的资源，而服务器（这里就是Nginx）并没有这个路径对应的静态文件，所以会返回404。下面介绍两种简单的解决办法。
解决办法1
修改Nginx配置文件：
location / { try_files $uri $uri/ /index.html; }将所有无法匹配到静态文件的请求重定向到index.html，然后由Vue Router在前端处理路由。
解决方法2
修改前端项目Vue Router配置：
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({ # history: createWebHistory(), // 使用Hash模式 history: createWebHashHistory(),})缺点是URL会出现#，例如xxx.xxx/#/xxx。
分享这篇文章
SPA（单页应用）404路由问题
SPA（单页应用）404路由问题
https://blog.endlesssolo.com/posts/6822b1ce/