Vue3 Vue-Router 部署在nginx二级目录之下的方法

项目场景：

在部署Vue-Router项目的时候，有时需要部署在二级目录之下，比如管理系统一般部署在/manage目录之下。

问题描述

如果直接把本地的系统上传到服务器的/manage文件夹下，再通过router进入其他页面时，就会丢失/manage的目录，造成错误。

解决方案：

1 添加URL前缀环境变量

在.env.production文件中添加环境变量如下

VITE_BASE_PATH = /manage/  

2 更改vite.config.js

由于vite.config.js中不能直接使用import.meta.env,因此使用loadEnv来获取环境变量，总体使用如下代码

export default defineConfig(({mode})=>{
    const root = process.cwd();
    const viteEnv = loadEnv(mode, root)
return {
    base:viteEnv.VITE_BASE_PATH,
    plugins: [
    vue(),
],
resolve: {
    alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    }
    }
})

3 更改route.js

在createRouter 中添加base属性，值为前缀地址，采用import.meta.env的方法引入

const router = createRouter({
    history: createWebHashHistory(import.meta.env.VITE_BASE_PATH),
    routes,
    base:import.meta.env.VITE_BASE_PATH,
});

4 createRouter中使用createWebHashHistory而不是createWebHistory 防止刷新后出现404页面