背景
问：
前端项目，如何配置使用env const isProd = process.env.NODE_ENV === 'production'
回复：
在前端项目里，把 process.env.NODE_ENV 注入到代码里只有 两步：
-
在「构建工具」里把 NODE_ENV 写进环境变量
-
在「业务代码」里直接读
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。