process.env.NODE_ENV 开发环境配置详解（Vue项目）

Posted 2023-03-31 欢迎来到我的博客

https://blog.csdn.net/qq_43886365/article/details/128370109

这一路，灯火通明

process.env.NODE_ENV理解

1、理解NODE_ENV

在node中，有全局变量process表示的是当前的node进程。process.env包含着关于系统环境的信息。但是process.env中并不存在NODE_ENV这个东西。NODE_ENV是用户一个自定义的变量，在webpack中它的用途是判断生产环境或开发环境的依据的。

 process是node的全局变量，并且process有env这个属性，但是没有NODE_ENV这个属性。

process.env 属性返回的是一个包含用户环境信息的对象，它可以区分开发环境或正式环境的依据

2、理解 DefinePlugin 含义

官网解释的是：DefinePlugin允许我们创建全局变量，可以在编译时进行设置，因此我们可以使用该属性来设置全局变量来区分开发环境和正式环境。这就是 DefinePlugin的基本功能。

因此我们可以在webpack.config.js 中添加如下代码配置全局变量信息了，因为当webpack进行编译的时候会全局设置变量；如下代码：

module.exports = 
  plugins: [
    // 设置环境变量信息
    new webpack.DefinePlugin(
      PRODUCTION: JSON.stringify(true),
      VERSION: JSON.stringify(‘5fa3b9‘),
      BROWSER_SUPPORTS_HTML5: true,
      TWO: ‘1+1‘,
      ‘typeof window‘: JSON.stringify(‘object‘),
      ‘process.env‘: 
        NODE_ENV: JSON.stringify(process.env.NODE_ENV)
      
    )
  ]

package.json 打包配置如下命令：

"scripts": 
  "dev": "webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
,

这样配置完成后，为了验证一下是否是全局变量，运行npm run dev 打包后，我们可以在我们项目中入口js文件，打印下即可：比如如下代码：

console.log(‘Running App version ‘ + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印  NODE_ENV: undefined 

如上信息可以看到 process.env.NODE_ENV 打印出为undefined，那是因为我们在 package.json文件中未进行配置。下面我们把package.json 加上 NODE_ENV变量值，代码打包命令变成如下：

"scripts": 
  "dev": "NODE_ENV=development webpack-dev-server --progress --colors --devtool cheap-module-eval-source-map --hot --inline",
  "build": "NODE_ENV=production webpack --progress --colors --devtool cheap-module-source-map",
  "build:dll": "webpack --config webpack.dll.config.js"
,

如上打包命令，在dev打包命令上，前面加上了 NODE_ENV=development 命令，在build打包命令上前面加上了 NODE_ENV=production，因此继续查看代码结果变为如下：

console.log(‘Running App version ‘ + VERSION); // 打印 Running App version 5fa3b9
console.log(PRODUCTION); // 打印 true
console.log(process.env); // 打印  NODE_ENV: ‘development‘ 

可以看到这个时候 process.env.NODE_ENV 才有值，因此在项目打包中，为了区分开发环境和正式环境我们像如上配置即可，然后在webpack.config.js中通过 process.env.NODE_ENV 这个来区分正式环境还是开发环境即可。

 

转载https://www.cnblogs.com/tugenhua0707/p/9780621.html