前端构建工具环境变量注入方案（Vite & Webpack）思维图 Vite注入方案配置脚本 package.json

思维图

graph TD
    A[编译脚本变量传入] --> B{构建工具}
    B -->|Vite| C[CLI参数/Env文件/Define配置]
    B -->|Webpack| D[CLI参数/DefinePlugin/EnvironmentPlugin]
    C --> E[import.meta.env]
    D --> F[process.env]

Vite注入方案

配置脚本

package.json 配置：

"scripts": {
  "dev:china": "vite --mode china",
  "build:america": "vite build --mode america"
}

运行原理：

--mode 参数会同时触发：
1. 加载对应 .env.[mode] 文件
2. 设置 import.meta.env.MODE 值
3. 注入 VITE_ 前缀的变量

代码调用：

console.log(import.meta.env.MODE) // 'china'

跨平台统一方案（Windows/Linux）

安装 cross-env

# 使用 npm
npm install --save-dev cross-env

# 使用 yarn
yarn add -D cross-env

使用 cross-env

"scripts": {
  "build:china": "cross-env REGION=china THEME=red webpack",
  "build:america": "cross-env REGION=america THEME=blue webpack"
}

代码中读取变量

// Vite 项目
console.log(import.meta.env.MODE) // 输出 'development' 或 'production'

// Webpack 项目
console.log(process.env.NODE_ENV) // 输出 'development' 或 'production'

Webpack注入方案

CLI `--env` 参数

Webpack 环境变量注入方案

基础实现

package.json 配置：

"scripts": {
  "build:china": "webpack --env region=china ",
  "build:america": "webpack --env region=america "
}

webpack.config.js 配置：

module.exports = (env) => {
  console.log(env) // { region: 'china' }
  
  return {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.REGION': JSON.stringify(env.region),
        'process.env.THEME': JSON.stringify(env.theme)
      })
    ]
  }
}

跨平台赋值：`cross‑env`

同样地，为兼容 Windows，可在 NPM 脚本里利用 cross-env：

"scripts": {
  "build": "cross-env NODE_ENV=production webpack --config webpack.config.js"
}

cross-env 会在不同系统下正确设置 process.env.NODE_ENV

`DefinePlugin`

DefinePlugin 可在编译期将指定表达式替换成常量，常用于根据环境变量控制代码分支：

// webpack.config.js
const webpack = require('webpack');
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      'process.env.DEBUG': JSON.stringify(process.env.DEBUG === 'true'),
    })
  ]
};

打包后，所有 process.env.DEBUG 会被替换为 true 或 false 字面量

总结：

Vite：推荐使用 .env + import.meta.env，结合 CLI 赋值和 define 配置满足绝大多数场景。

Webpack：可通过 CLI --env、cross-env 设置 process.env，再借助 DefinePlugin/EnvironmentPlugin 注入到代码中进行静态替换。

前端构建工具环境变量注入方案（Vite & Webpack）

思维图