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。