Vite多环境打包需通过环境变量+构建脚本+配置动态设置outDir，如build:staging生成dist/staging/产物，并同步配置base适配子路径。
多环境打包输出目录的配置，核心是让不同环境构建产物互不干扰、路径清晰可辨。Vite 本身不直接按环境自动切换 outDir，需要结合环境变量 + 构建脚本 + 配置文件动态控制。
用环境变量区分构建目标
在根目录创建对应环境的 .env 文件，例如：
-
.env.development：定义VITE_ENV=dev -
.env.staging：定义VITE_ENV=staging -
.env.production：定义VITE_ENV=prod
Vite 会自动加载 .env.[mode] 中的变量（运行 vite build --mode staging 时加载 .env.staging）。
在 vite.config.ts 中动态设置 outDir
读取 process.env.VITE_ENV，拼出不同输出路径：
立即学习“Java免费学习笔记（深入）”；
import { defineConfig } from 'vite';
import { resolve } from 'path';
export default defineConfig(({ mode }) => {
const env = mode; // 或 process.env.VITE_ENV
const outDir = `dist/${env}`;
return {
build: {
outDir,
assetsDir: 'assets',
rollupOptions: {
output: {
chunkFileNames: 'assets/js/[name]-[hash].js',
entryFileNames: 'assets/js/[name]-[hash].js',
assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
}
}
}
};
});
配套定义构建脚本
在 package.json 中添加明确的命令：
"scripts": {
"build:dev": "vite build --mode development",
"build:staging": "vite build --mode staging",
"build:prod": "vite build --mode production"
}
执行 npm run build:staging 后，产物会生成在 dist/staging/ 下，与开发版、生产版完全隔离。
注意 base 路径需同步适配
如果部署到子路径（如 /staging/），记得同步设置 base：
-
.env.staging中加一行：VITE_PUBLIC_PATH=/staging/ - 配置中使用：
base: process.env.VITE_PUBLIC_PATH || '/'
这样 HTML 中资源引用路径（如 <script src="/staging/assets/index.js">）才不会 404。
