在Webpack中，如何在不同环境中使用不同的API地址？-CSDN博客

在 Webpack 中实现不同环境使用不同 API 地址，核心是通过环境变量配合 Webpack 插件动态注入配置。以下是具体实现步骤：

一、准备工作

安装必要依赖：

npm install dotenv-webpack --save-dev  # 用于加载 .env 文件
npm install cross-env --save-dev       # 跨平台设置环境变量

二、实现步骤

1. 创建环境配置文件

在项目根目录创建不同环境的 .env 文件，存储对应环境的 API 地址：

# .env.development（开发环境）
API_BASE_URL = 'http://dev-api.example.com'

# .env.test（测试环境）
API_BASE_URL = 'http://test-api.example.com'

# .env.production（生产环境）
API_BASE_URL = 'http://prod-api.example.com'

2. 配置 Webpack

修改 webpack.config.js，通过 dotenv-webpack 加载对应环境的配置，并使用 DefinePlugin 注入到代码中：

3. 在代码中使用 API 地址

直接通过 process.env.API_BASE_URL 访问当前环境的 API 地址：

// src/api.js
export const api = {
  baseUrl: process.env.API_BASE_URL,
  getUser: () => fetch(`${process.env.API_BASE_URL}/user`)
};

4. 配置 package.json 命令

添加不同环境的构建命令，通过 cross-env 设置 NODE_ENV：

{
  "scripts": {
    "build:dev": "cross-env NODE_ENV=development webpack build",
    "build:test": "cross-env NODE_ENV=test webpack build",
    "build:prod": "cross-env NODE_ENV=production webpack build"
  }
}

三、关键说明

变量注入时机：
环境变量在构建阶段被注入代码（会被硬编码到打包后的文件中），而非运行时动态获取。
安全性注意：
前端代码中的环境变量会暴露在打包后的 JS 中，不要存放密钥、Token 等敏感信息。
优先级规则：
- 命令行中设置的变量（如 cross-env API_BASE_URL=xxx）会覆盖 .env 文件中的配置
- 可以创建 .env.local 存放本地开发配置（需加入 .gitignore，避免提交到仓库）

Webpack 5 简化方案：
若使用 Webpack 5，可通过 webpack.DefinePlugin 直接读取 process.env，无需 dotenv-webpack：

new webpack.DefinePlugin({
  'process.env.API_BASE_URL': JSON.stringify(
    process.env.NODE_ENV === 'production' 
      ? 'http://prod-api.example.com' 
      : 'http://dev-api.example.com'
  )
})