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

路径"/>

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

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

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，不用rootalias html/dist/;index  index.html;#若不配置try_files，刷新会404try_files $uri $uri/ /web/index.html;}