前端多环境变量配置全攻略：开发 / 测试 / 生产自动切换实战
摘要
在前端开发中，我们经常会遇到不同环境需要不同配置的情况。比如，开发环境使用本地接口，测试环境指向测试服务器，生产环境则连接正式接口。手动切换这些地址不仅麻烦，而且容易出错。本文将带你从零配置到实战，讲解如何通过环境变量文件 + 构建工具实现多环境自动切换，并结合实际场景给出可运行 Demo。
引言
前端项目越来越复杂，单一的配置文件已经无法满足开发、测试、生产等多环境需求。我们希望有一种方式：
方便：切换环境时无需改动代码。
安全：生产环境的敏感信息不会被误提交到开发或测试环境。
自动化：构建时自动选择对应的环境变量。
在现代前端开发中，Vite、Webpack、Vue CLI 等工具都提供了对多环境变量的支持。本文以 Vite 为例，同时会给出 Webpack 版本参考，方便实际项目使用。
不同环境的配置文件
创建 .env 文件
在项目根目录新建环境变量文件：
# .env.development
VITE_API_BASE=http://localhost:3000
VITE_APP_NAME=MyApp-Dev# .env.test
VITE_API_BASE=https://test.api.example.com
VITE_APP_NAME=MyApp-Test# .env.production
VITE_API_BASE=https://api.example.com
VITE_APP_NAME=MyApp
文件规则说明
.env.development：开发环境变量.env.test：测试环境变量.env.production：生产环境变量
注意：在 Vite 中，环境变量必须以
VITE_开头才能在代码中被访问。
在代码中使用环境变量
获取变量
在前端代码里可以直接使用：
// src/api.ts
const BASE_URL = import.meta.env.VITE_API_BASE
const APP_NAME = import.meta.env.VITE_APP_NAMEexport function getUser() {return fetch(`${BASE_URL}/user`).then(res => res.json())
}
这样，无论你是开发、测试还是生产环境，
BASE_URL都会根据当前构建环境自动切换。
实战场景示例
场景一：不同环境接口切换
开发时需要连接本地服务，测试时访问测试服务器，生产时访问正式 API。
// src/main.ts
import { getUser } from './api'console.log('当前应用名:', import.meta.env.VITE_APP_NAME)getUser().then(data => {console.log('用户数据:', data)
})
构建命令：
# 开发环境
npm run dev --mode development# 测试环境
npm run build --mode test# 生产环境
npm run build --mode production
执行不同命令后，控制台会输出不同的 APP_NAME，并且 getUser 请求的接口也随之切换。
场景二：动态展示环境提示
在测试或开发环境中，我们可能想给用户或测试人员一个明显的提示，比如在页面顶部显示“开发环境”或“测试环境”。
<template><div><h1>{{ appName }}</h1><div v-if="isDevEnv" class="env-tag">开发环境</div></div>
</template><script setup lang="ts">
const appName = import.meta.env.VITE_APP_NAME
const isDevEnv = import.meta.env.MODE === 'development'
</script><style>
.env-tag {background-color: #f56c6c;color: white;padding: 4px 10px;border-radius: 4px;
}
</style>
页面中会根据环境动态显示环境标签，减少测试或发布错误。
Webpack 版本示例
如果你的项目使用 Webpack，可以通过 DefinePlugin 注入环境变量：
// webpack.config.js
const webpack = require('webpack')
const dotenv = require('dotenv')
const env = dotenv.config({ path: `.env.${process.env.NODE_ENV}` }).parsedmodule.exports = {plugins: [new webpack.DefinePlugin({'process.env': JSON.stringify(env)})]
}
然后在代码中：
const BASE_URL = process.env.VITE_API_BASE
构建时通过 NODE_ENV 指定环境：
# 开发
NODE_ENV=development webpack serve# 测试
NODE_ENV=test webpack --mode production# 生产
NODE_ENV=production webpack --mode production
QA
Q1：为什么 Vite 的环境变量要以 VITE_ 开头？
A1：Vite 出于安全考虑，只会暴露以 VITE_ 开头的变量到前端代码，防止泄露敏感信息。
Q2：能在运行时动态切换环境吗？
A2：环境变量一般在构建阶段确定，如果需要运行时切换，可以考虑接口代理或配置文件动态加载。
Q3：如果新增环境，比如预发布环境，怎么办？
A3：同理新建 .env.pre 文件，并在构建时通过 --mode pre 指定即可。
总结
多环境变量配置是现代前端开发的必备技能。通过 .env 文件 + 构建工具配置，可以轻松实现开发、测试、生产环境的自动切换：
- 开发环境：方便调试和开发
- 测试环境：隔离测试服务器，减少错误
- 生产环境：保证正式环境安全和稳定
无论是 Vite 还是 Webpack，都有成熟的方案支持多环境变量。掌握它后，你的项目配置将更规范，也更安全。