在 vite 项目中切换构建模式，需要在执行 vite build 命令时添加 --mode 参数，例如运行 npx vite build --mode production。vite 会根据该参数加载对应的配置文件（如 vite.config.production.js）以及环境变量文件（如 .env.production）。如果未指定模式，默认使用 production 模式，此时 import.meta.env.mode 的值为 production。
Vite 如何根据 mode 加载不同的配置文件和环境变量
Vite 通过命令行传入的 --mode 值来决定加载哪些配置和环境变量。当执行 npx vite build --mode staging 时，Vite 会尝试加载 vite.config.staging.js 或 vite.config.ts 中针对该模式的配置，并读取 .env.staging 文件中的变量。这些变量会被注入到前端代码中，可通过 import.meta.env.VITE_API_URL 访问。若未提供对应文件，则回退到 .env 和 .env.local。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig(({ mode }) => {
console.log('Current mode:', mode); // 输出: staging
return {
base: mode === 'staging' ? '/staging/' : '/',
plugins: []
};
});
// .env.staging
VITE_API_URL=https://api.staging.example.com
// 运行命令
// npx vite build --mode staging
// 输出: Current mode: staging
// 构建产物将使用 /staging/ 作为基础路径
如何在代码中判断当前构建模式并调整行为
在前端代码中，可以通过 import.meta.env.MODE 获取当前构建模式。该属性是一个只读字符串，其值与命令行中指定的 --mode 一致。开发者可基于此值进行条件渲染、API 地址切换或功能开关控制。例如，在非生产环境下启用调试日志或 Mock 服务。注意 MODE 与自定义变量（如 VITE_APP_ENV）不同，前者由 Vite 内部管理，后者需手动定义。
// src/utils/env.js
const isProduction = import.meta.env.MODE === 'production';
const isDevelopment = import.meta.env.MODE === 'development';
const isStaging = import.meta.env.MODE === 'staging';
export function getApiBaseUrl() {
if (isStaging) {
return import.meta.env.VITE_API_URL || 'https://api.staging.example.com';
}
if (isProduction) {
return import.meta.env.VITE_API_URL || 'https://api.prod.example.com';
}
return 'http://localhost:3000/api';
}
// 测试验证
console.log(getApiBaseUrl()); // 取决于运行时的 MODE
当未指定 mode 时 Vite 的默认行为是什么
如果在执行 vite build 时未使用 --mode 参数，Vite 默认使用 production 模式。这意味着 import.meta.env.MODE 将等于 production，同时优先加载 .env.production 文件中的环境变量。此外，Vite 会在生产模式下启用代码压缩、Tree Shaking 等优化策略。若希望改变默认行为，可在 vite.config.js 中通过 defineConfig 的第二个参数 command 和 mode 显式设置 fallback 逻辑，但通常建议始终显式指定 mode 以避免歧义。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
