在NGINX部署了vite + vue3 + vueRouter4项目后，出现404问题的解决办法，包括配置了try_files后，刷新仍然404的解决办法

问题描述

我的项目使用的是vite+vue3+vueRouter4，项目打包后项目部署在nginx服务器中，出现刷新404问题

查看vueRouter文档是要添加下面代码

try_files	$uri $uri/  index.html;

刷新后仍然还是404

查阅大量资料后得出以下解决方案

试过其他的vite+vueRouter项目，都能解决404问题

解决方案

在nginx的config中使用以下代码

location /address {
    indexindex.html;
    # try_files	$uri $uri/  index.html;
    try_files $uri $uri/ @router;
}
location @router {
 rewrite ^.*$ /address/index.html last;
}

如果仍未解决404问题

首先添加环境文件，.env.dev和.env.prod，定义环境变量VITE_APP_BASE_PATH

查看router/index.ts并按以下配置

const router = createRouter({
  history: createWebHistory(import.meta.env.VITE_APP_BASE_PATH),
  routes
})

至此，已经能够解决了刷新404问题，如果是资源404

在vite.config.ts文件中

// 主要是base属性，这里添加了获取环境变量的方法
import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  return {
    'base': env.VITE_APP_BASE_PATH,
  }
})

如果有ESLint报错，自己想办法解决 _(:з」∠)_