process.env.NODE_ENV 在浏览器下和 node 环境下读取的是哪个文件设置的值？

Question

process 对象是 node 的全局变量， 提供当前 Node 进程的信息。
process.env 属性返回一个对象，包含当前 shell 的所有环境变量

在 webpack 里面，我们常常新建一个环境变量 NODE_ENV，用来判断所处的是开发环境|生产环境|测试环境

我的问题是，通常大家设置 NODE_ENV 这个变量在哪设置？

1.package.json 文件里可以设置为

"dev": "cross-env NODE_ENV=development webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"build": "cross-env NODE_ENV=production webpack --config build/webpack.prod.conf.js",

2.也可以在 webpack 文件下的配置文件 config 里面设置

module.exports = {
  build: {
    env: {
      NODE_ENV: '"production"'
    }
  },
  dev: {
    env: {
      NODE_ENV: '"development"'
    }
  }
}

那么在 build 文件夹下的比如 webpack.dev.conf.js 文件里(node环境？)读取 process.env.NODE_ENV 是读取的那个文件定义的 NODE_ENV 值呢？
以及在src下某个文件里（浏览器环境？）读取 process.env.NODE_ENV是读取的哪个文件 ?

Answer 1

首先楼主明白的，process.env 是 Node 环境的定义的变量，浏览器环境肯定是返回 undefined 的。
1，首先怎样让 Node 去识别当前运行的是哪个变量，是 “development” 还是 “production”，这个是通过 cross-env 来定义的。它是一个跨平台的（windows or maxos or liunx），识别当前运行的环境变量的工具。当然去查看下它的文档说明，更直观。

2，怎样让浏览器去识别当前运行的环境变量呢？其实 webpack 有个插件，就是 webpack.DefinePlugin

new webpack.DefinePlugin({
      // process.env 这个就会被浏览器环境所识别
      'process.env': require('./config/dev.env')
    }),

所以浏览器才会认识 process.env.NODE_ENV

---

如有帮助，麻烦点击下采纳，谢谢~

Answer 2

阅读 webpack4 官网文档 Mode,里面提到

If not set, webpack sets production as the default value for mode. The supported values for mode are:

如果没有设置 mode 值，默认 mode 值为 "production" 。 设置 process.env.NODE_ENV 还能通过 mode 值读取。测试下来貌似最终读取的是 mode 的值

Answer 3

是这样的，vue是运行在web上的，不存在node的变量或者api(包括其中的process)

通过webpack.base.config.js的module.exports.node的配置使node的api在web端有效，所以在web端不存在process.env对应的环境变量，只是一个空对象，所以方便挂载是生产环境还是开发环境的NODE_ENV

Answer 4

process.env.NODE_ENV 这个读取的就是全局的，而不是哪个文件的，就像浏览器端的window对象，你在上面挂载一个变量。其他文件就可以访问到，一个道理