前端——不同环境下配置env

背景

问：

        前端项目，如何配置使用env const isProd = process.env.NODE_ENV === 'production'

回复：

在前端项目里，把 process.env.NODE_ENV 注入到代码里只有 两步：

1. 在「构建工具」里把 NODE_ENV 写进环境变量

2. 在「业务代码」里直接读 process.env.NODE_ENV（或你自己定义的其它变量）

下面给出主流脚手架/构建工具的「最小可运行」配置示例，按你正在用的那一节抄即可。
（所有示例都默认你已经装了对应 CLI，且项目根目录有 .env* 文件）

一、Create-React-App（react-scripts）

CRA 已经内置了 DefinePlugin，只要：

1.根目录新建

.env                # 所有环境通用
.env.development    # 开发环境
.env.production     # 生产环境

2.文件里写（必须以 REACT_APP_ 开头）

REACT_APP_API_URL=https://api.example.com

3.代码里直接读

const isProd = process.env.NODE_ENV === 'production'
const apiRoot = process.env.REACT_APP_API_URL

4.启动

npm start        // 会自动把 NODE_ENV 设为 development
npm run build    // 会自动把 NODE_ENV 设为 production

二、Vite Vite 用 import.meta.env，但同样支持 .env 文件：

1.根目录新建

.env
.env.development
.env.production

2.变量名以 VITE_ 开头

VITE_API_URL=https://api.example.com

3.代码里读

const isProd = import.meta.env.PROD          // vite 内置
const apiRoot = import.meta.env.VITE_API_URL

4.启动

npm run dev      // 默认 development
npm run build    // 默认 production

三、Webpack 手写配置 如果你是自己搭的 webpack，需要手动注入 DefinePlugin：

1.安装依赖

npm i -D dotenv-webpack // 或者 dotenv

2.webpack.config.js

const Dotenv = require('dotenv-webpack')

module.exports = (env, argv) => {
  const isProd = argv.mode === 'production'

  return {
    mode: isProd ? 'production' : 'development',
    plugins: [
      new Dotenv({   // 把 .env 文件打进去
        path: `./.env.${isProd ? 'production' : 'development'}`
      }),
      // 如果只想注入 NODE_ENV，可以简写：
      // new webpack.DefinePlugin({
      //   'process.env.NODE_ENV': JSON.stringify(argv.mode)
      // })
    ]
  }
}

3.代码里照旧

const isProd = process.env.NODE_ENV === 'production'

四、Nuxt / Next

• Next.js：内置 NEXT_PUBLIC_ 前缀，与 CRA 同理。

• Nuxt2：使用 publicRuntimeConfig；Nuxt3 使用 runtimeConfig。

五、常见坑速查

1.变量必须以约定前缀开头（REACT_APP_ / VITE_ / NEXT_PUBLIC_ …），否则会被过滤。

2.不要给变量加引号：

# 正确
REACT_APP_FOO=bar
# 错误
REACT_APP_FOO="bar"

3.改完 .env 必须重启 dev server，热更新不会重新加载。

4.浏览器里 process 并不存在，构建阶段会被静态替换，所以

if (process.env.NODE_ENV === 'development') {
  console.log('only in dev')
}

在 production 构建后整个 if 块会被 uglify 删掉，体积为零。

一句话总结
「把变量写到 .env.* 里 → 按构建工具要求加前缀 → 代码里直接读」即可；
只有裸 webpack 需要手动装插件/DefinePlugin。