Vite 项目中配置多环境文件以及使用方式

从环境文件创建到最终使用，完整演示 Vite 多环境配置。

一、环境文件创建与说明

在项目根目录（与 package.json 同级）创建以下文件：

.env（全局默认，所有环境都会加载）

# VITE_ 前缀的变量会被暴露给客户端代码（import.meta.env 可访问）
VITE_APP_TITLE=我的应用
VITE_API_TIMEOUT=5000

# 不带 VITE_ 前缀的变量仅在 Node.js 环境（如 vite.config.js）中可用，不会暴露给浏览器
API_SECRET_KEY=only_for_server_side

.env.development（开发环境，vite 命令时加载）

VITE_APP_TITLE=我的应用(开发版)
VITE_API_BASE_URL=http://localhost:3000/api
VITE_ENABLE_MOCK=true

.env.staging（预发布环境，vite –mode staging 时加载）

VITE_APP_TITLE=我的应用(预发布)
VITE_API_BASE_URL=https://staging-api.example.com
VITE_ENABLE_MOCK=false

.env.production（生产环境，vite build 时加载）

VITE_APP_TITLE=我的应用
VITE_API_BASE_URL=https://api.example.com
VITE_ENABLE_MOCK=false

.env.local（本地私有覆盖，建议加入 .gitignore）

# 本地开发时覆盖其他文件中的同名变量，不会被提交到 Git
VITE_API_BASE_URL=http://192.168.1.100:3000

加载优先级（从高到低）：.env.[mode].local → .env.[mode] → .env.local → .env。同名变量会被后加载的覆盖。

二、package.json 脚本配置

{

\”scripts\”: {

// 开发环境：加载 .env.development
\”dev\”: \”vite –mode development\”,

// 预发布环境开发：加载 .env.staging
\”dev:staging\”: \”vite –mode staging\”,

// 生产环境构建：加载 .env.production
\”build\”: \”vite build –mode production\”,

// 预发布环境构建：加载 .env.staging
\”build:staging\”: \”vite build –mode staging\”,

// 本地预览构建产物
\”preview\”: \”vite preview\”
}
}

–mode 参数决定了 Vite 加载哪个 .env.[mode] 文件。不指定时，vite 默认 development，vite build 默认 production。

三、vite.config.js 详细配置（逐行说明）

// 第1行：从 Vite 核心模块导入 defineConfig（用于类型推导）和 loadEnv（用于加载环境变量）
import {

defineConfig, loadEnv } from \’vite\’;

// 第3行：导入 Node.js 的 path 模块，用于处理路径
import path from \’path\’;

// 第5行：导入 Vue 插件（如果是 Vue 项目）
import vue from \’@vitejs/plugin-vue\’;

// 第8行：defineConfig 接收一个函数，函数参数是一个包含 mode（当前模式）等属性的对象
export default defineConfig(({

mode }) => {

// 第10行：loadEnv 方法加载环境变量
// 参数1：mode – 当前模式（如 \’development\’、\’staging\’、\’production\’）
// 参数2：process.cwd() – 环境文件所在的目录（项目根目录）
// 参数3：\’\’ – 前缀过滤器，空字符串表示加载所有变量（包括不带 VITE_ 前缀的）
// 如果写 \’VITE_\’，则只加载以 VITE_ 开头的变量
const env =