手把手教你搞定前端多环境配置，开发和生产两不误！
作为一名前端老鸟，今天和大家分享一下我在项目中配置多环境的心得，保证实用不踩坑！
为什么要区分开发和生产环境？
最近接手了一个老项目，所有环境配置都写在一起，每次发布都提心吊胆。结果有一次不小心把开发环境的API地址打包到了生产，直接导致用户访问不了服务（惨痛的教训啊！）。
所以，合理区分环境配置真的很重要：
-
**开发环境**：需要调试工具、mock数据、热更新
-
**测试环境**：需要有完整日志、测试专用API
-
**生产环境**：需要性能优化、CDN地址、关键监控
主流构建工具配置方案
- Webpack环境变量
我们团队主要在Webpack项目中这样配置：
```javascript
// webpack.config.js
const webpack = require('webpack');
const devConfig = {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'),
'API_BASE': JSON.stringify('https://dev.api.com')
})
]
};
const prodConfig = {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production'),
'API_BASE': JSON.stringify('https://api.com')
})
]
};
module.exports = (env) => {
return env.production ? prodConfig : devConfig;
};
```
执行构建命令：
```bash
开发环境
webpack serve
生产环境
webpack --env production
```
- Vite的环境配置更优雅
自从改用Vite后，配置变得超级简单：
- 创建环境文件：
```
-
.env.development
-
.env.production
```
- 文件内容示例：
```ini
.env.development
VITE_API_BASE=https://dev.api.com
VITE_DEBUG=true
```
```ini
.env.production
VITE_API_BASE=https://api.com
VITE_DEBUG=false
```
- 代码中直接使用：
```javascript
console.log(import.meta.env.VITE_API_BASE);
```
更棒的是Vite会帮你自动注入环境变量，不用额外配置！
实际开发中的血泪经验
-
**不要在前端硬编码敏感信息**：曾经有个同事把数据库密码写在js变量里，结果被爬虫抓取（后果很严重）
-
**善用环境判断**：
```javascript
if (import.meta.env.DEV) {
// 开发环境专用代码
initMockData();
}
```
- **跨团队协作加注释**：
```javascript
/**
* @WARNING 生产环境会自动删除console.log
*/
```
- **CI/CD集成**：在Jenkins或GitHub Actions中自动判断分支，切换构建环境
我的推荐做法
-
首选**Vite + .env文件**方案（最简单）
-
复杂项目可考虑**配置文件动态加载**：
```javascript
// config.js
const env = process.env.NODE_ENV;
const configs = {
development: require('./dev.config'),
production: require('./prod.config')
};
module.exports = configs[env];
```
- 考虑使用**TypeScript类型**确保安全：
```typescript
interface EnvConfig {
API_BASE: string;
DEBUG: boolean;
}
const config: EnvConfig = {
API_BASE: import.meta.env.VITE_API_BASE,
DEBUG: import.meta.env.VITE_DEBUG === 'true'
}
```
总结
环境配置看似简单，实则影响深远。一个好的配置方案应该：
-
开发时提供充分辅助
-
构建时自动适配环境
-
上线后绝对安全
希望本文能帮到正在配置环境的你！如果有更好的方案欢迎评论区讨论～