Vue3+Vite+history模式+Nginx 部署二级路径

背景需求：项目打包及部署到服务器二级路由
例如：我希望将打包的项目部署到 https://xxx.com/web/ 上

1、配置环境变量
.env.production文件

##生产环境
NODE_ENV='production'
VITE_BASE_PATH=/web/

.env.development文件

##开发环境
NODE_ENV='development'
VITE_BASE_PATH='/'

配置路由文件router/index.js

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

配置vite.config.js

import {
    
     defineConfig, loadEnv } from 'vite';
export default defineConfig(({
     
      command, mode }) => {
    
    
    const env = loadEnv(mode, process.cwd(), '');
    return {
    
    
        base: env.VITE_BASE_PATH,
    }
});

nginx配置文件

server {
    
    
  location /web {
    
    
    #二级路由时需要使用别名alias，不用root
    alias html/dist/;
    index  index.html;
    #若不配置try_files，刷新会404
    try_files $uri $uri/ /web/index.html;
  }