vite中vue-router路由使用history模式开发部署完整示例

最近的一个项目，使用vite4+vue3+ts开发的，因为需要用到hash锚点跳转，故而将vue-router 路由改成了history模式。在这里记录一下整个开发环境及生产环境部署的完整示例过程，包含nginx配置，index.html中使用静态资源等，供有需要的同学参考。

1. 配置环境变量文件

.env.development 开发环境工程baseUrl变量

VITE_BASE_URL=./

.env.productiont 生产环境工程baseUrl变量

##这里的app-name替换成自己的工程名称即可
VITE_BASE_URL=/app-name/

2. 修改vite.config.js文件

import {defineConfig, ConfigEnv, loadEnv} from 'vite'
export default defineConfig((mode: ConfigEnv) => {
    const env = loadEnv(mode.mode, process.cwd())
    return {
        base: env.VITE_BASE_URL,
        // ...其它配置
    }
})

3. 修改router文件

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

4. nginx配置

这里的 /app-name 替换成自己的工程名称

location /app-name  {
    alias  /home/data/www/app-name;
    index  index.html index.htm;
    try_files $uri $uri/ /app-name/index.html;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For  $proxy_add_x_forwarded_for;
    add_header 'Access-Control-Allow-Origin' '*';
}

5. index.html中静态资源使用（如果有）

我的lib/vendor.js文件是放在了项目根目录的public目录下的

<script src="%VITE_BASE_URL%lib/vendor.js"></script>