关于 Vue3 Router history 模式部署Nginx 出现刷新404问题

缘由

最近新买一个云服务器，自己创建一个 Vue H5 项目，因为强迫看不惯 Vue Router 的 hash 模式，坚持使用 history 模式。结果都是遇到网上同样的问题。不怕你前进和后退，就怕你刷新，一刷新就报404错误。一番折腾最后还是使用 nginx 配置 location 进行通配符 匹配就解决了问题。

软件版本以及环境

以下是个人的环境以及软件版本

Nginx 1.18.0
Vue 3.3.11
Vue Router 4.2.5

方案详细

Vite Config 配置

使用 Vue Router 模式，还是建议设置 BASE_URL , 假设此次项目的 BASE_URL 为 webapp 修改 vite.config.js 配置 base

JavaScript 复制代码

// https://vitejs.dev/config/
export default defineConfig({
  +++++++++++++++++
  base: '/webapp',
  +++++++++++++++++
  publicDir: "public",
  assets: "src/assets",
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Nginx 配置

找到 nginx 的配置文件 nginx.conf ，不熟悉 nginx 的同学最好复制默认配置，并且修改为 nginx.default.conf 备份一下。找你要托管的 server 下，然后使用 location 进行匹配

nginx 复制代码

server {
    ...
    location /webapp {
           # 注意这里的 /var/html/webapp 路径需要修改成你放置在服务器项目源码的位置
           alias /var/html/webapp;
           index index.html index.htm;
           try_files $uri $uri/ /var/html/webapp/index.html;
		
           # 处理子路由
           location ~ /webapp/.+ {
               try_files $uri /webapp/index.html;
           }
    }
    ...
}

说明这里 history 的生成方式不是在源码中生成直接文件夹，而是通过 vue 路由生成的，所以使用 nginx 对二级路径进行定位会找不到项目指定的文件，这时候要通过通配的方式，只要是路径符合 webapp 开发的路径都统一跳转到 /var/html/webapp/index.html 路径下交由 index.js 文件处理。这样就达到了处理路由的方式。

参考

关于 nginx 配置的简单了解可以参考