背景需求:项目打包及部署到服务器二级路由
例如:我希望将打包的项目部署到 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; }