一文弄懂如何在 Vue 中配置 process.env.NODE_ENV

最近在研习 vue.config.js 文件，发现一行，甚是费解。

process.env.NODE_ENV

查阅资料后，发现武林众功法中对 process.env.NODE_ENV 没有解释的太清楚，遂决定以一功法记录。

process.env 为何物

言归正传。 process.env 是 Node.js 中的一个环境对象。其中保存着系统的环境的变量信息。可使用 Node.js 命令行工具直接进行查看。

而 NODE_ENV 就是其中的一个环境变量。这个变量主要用于标识当前的环境（生产环境，开发环境）。默认是没有这个环境变量的，需要自己手动配置。不同系统有不同的环境变量配置方式，在这里就不多加赘述。

NODE_ENV 与 Vue

NODE_ENV 变量只能在系统中配置吗？其实不然。在 Vue 项目中， Vue 提供了自己的配置方式。这就要涉及到 Vue CLI 中模式的概念了。 Vue CLI 文档说明了这个问题。

也就是说，在 Vue 中， NODE_ENV 可以通过 .env 文件或者 .env.[mode] 文件配置。配置过后，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入其中了。而这些命令，都有自己的默认模式：

npm run dev(serve) ，其实是运行了 vue-cli service serve ，默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。
npm run build ，其实运行了 vue-cli service build ，默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV 。

修改方式如下，以键值对的方式：

除了以上的修改方式外，也可以在命令后直接使用 --mode 参数手动指定模式。当然，每个模式配置的变量也不只有 NODE_ENV , 也可以通过配置其他的变量简化工作流程。

模式的应用

有了模式的概念，就可以根据不同的环境配置模式，就不用每次打包时都去更改 vue.config.js 文件了。比如在测试环境和生产环境， publicPath参数（部署应用包时的基本 URL）可能不同。遇到这种情况就可以在 vue.config.js 文件中，将 publicPath 参数设置为：

publicPath: process.env.BASE_URL

设置之后，再在各个 .env.[mode] 文件下对 BASE_URL 进行配置就行了，这样就避免了每次修改配置文件的尴尬。其他的配置也是同理。

Tips: 即使不是生产环境，也可以将模式设置为 production ，这样可以获得 webpack 默认的打包优化。

process.env.NODE_ENV详解

一、 process.env.NODE_ENV是什么？

在node中，有全局变量process表示的是当前的node进程。
process.env包含着关于系统环境的信息，但是process.env中并不存在NODE_ENV这个东西。

NODE_ENV是一个用户自定义的变量，在webpack中它的用途是判断生产环境或开发环境。

为了查看 process的基本信息，我们可以在文件夹中新建一个process.js文件，在里面加一句代码console.log(process);然后进入该文件夹，执行node process.js可以在命令行中打印如下信息：

$ node process.js
process {title: 'node',version: 'v4.4.4',moduleLoadList: [....],versions: { http_parser: '2.5.2',node: '4.4.4',v8: '4.5.103.35',uv: '1.8.0',zlib: '1.2.8',ares: '1.10.1-DEV',icu: '56.1',modules: '46',openssl: '1.0.2h' },arch: 'x64',platform: 'darwin',release: { name: 'node',lts: 'Argon',sourceUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4.tar.gz',headersUrl: 'https://nodejs.org/download/release/v4.4.4/node-v4.4.4-headers.tar.gz' },argv: [ '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node','/Users/tugenhua/个人demo/process.js' ],execArgv: [],env: { TERM_PROGRAM: 'Apple_Terminal',SHELL: '/bin/zsh',TERM: 'xterm-256color',TMPDIR: '/var/folders/l7/zndlx1qs05v29pjhvkgpmhjm0000gn/T/',Apple_PubSub_Socket_Render: '/private/tmp/com.apple.launchd.7Ax4C1EWMx/Render',TERM_PROGRAM_VERSION: '404',TERM_SESSION_ID: '82E05668-442D-4180-ADA3-8CF64D85E5A9',USER: 'tugenhua',SSH_AUTH_SOCK: '/private/tmp/com.apple.launchd.MYOMheYcL3/Listeners',PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin',PWD: '/Users/tugenhua/个人demo',LANG: 'zh_CN.UTF-8',XPC_FLAGS: '0x0',XPC_SERVICE_NAME: '0',SHLVL: '1',HOME: '/Users/tugenhua',LOGNAME: 'tugenhua',SECURITYSESSIONID: '186a8',OLDPWD: '/Users/tugenhua/工作文档/sns_pc',ZSH: '/Users/tugenhua/.oh-my-zsh',PAGER: 'less',LESS: '-R',LC_CTYPE: 'zh_CN.UTF-8',LSCOLORS: 'Gxfxcxdxbxegedabagacad',NVM_DIR: '/Users/tugenhua/.nvm',NVM_NODEJS_ORG_MIRROR: 'https://nodejs.org/dist',NVM_IOJS_ORG_MIRROR: 'https://iojs.org/dist',NVM_RC_VERSION: '',MANPATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/share/man:/usr/local/share/man:/usr/share/man:/Applications/Xcode.app/Contents/Developer/Platforms/MacOSX.platform/Developer/SDKs/MacOSX10.13.sdk/usr/share/man:/Applications/Xcode.app/Contents/Developer/usr/share/man:/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/share/man',NVM_PATH: '/Users/tugenhua/.nvm/versions/node/v4.4.4/lib/node',NVM_BIN: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin',_: '/Users/tugenhua/.nvm/versions/node/v4.4.4/bin/node',__CF_USER_TEXT_ENCODING: '0x1F5:0x19:0x34' },pid: 14034,features: { debug: false,uv: true,ipv6: true,tls_npn: true,tls_sni: true,tls_ocsp: true,tls: true },_needImmediateCallback: false,config: {},nextTick: [Function: nextTick],_tickCallback: [Function: _tickCallback],_tickDomainCallback: [Function: _tickDomainCallback],stdout: [Getter],stderr: [Getter],stdin: [Getter],openStdin: [Function],exit: [Function],kill: [Function],mainModule: Module {id: '.',exports: {},parent: null,filename: '/Users/tugenhua/个人demo/process.js',loaded: false,children: [],paths: [ '/Users/tugenhua/个人demo/node_modules','/Users/tugenhua/node_modules','/Users/node_modules','/node_modules' ] } }

如上就可以看到 process是node的全局变量，并且process有env这个属性，但是没有NODE_ENV这个属性。

二、process.env.NODE_ENV该如何配置？

process.env属性返回的是一个包含用户环境信息的对象，它可以区分开发环境或正式环境的依据，那么我们如何配置它呢？

方法1：配置环境变量

windows环境配置如下：

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在
set NODE_ENV #如果不存在则添加环境变量
set NODE_ENV=production #环境变量追加值 set 变量名=%变量名%;变量内容
set path=%path%;C:\web;C:\Tools #某些时候需要删除环境变量
set NODE_ENV=

Linux配置(mac系统环境也属于这个)如下：

#node中常用的到的环境变量是NODE_ENV，首先查看是否存在
echo $NODE_ENV#如果不存在则添加环境变量
export NODE_ENV=production#环境变量追加值
export path=$path:/home/download:/usr/local/#某些时候需要删除环境变量
unset NODE_ENV#某些时候需要显示所有的环境变量
env

注意：如果NODE_ENV设置为production后，所有的项目都会处于正式环境中。
此时使用命令npm install下载依赖包时，只会把package.json中的dependencies依赖项下载下来，对于devDependencies中的依赖包是下载不下来的。因此需要使用上面的命令unset NODE_ENV删除刚刚设置的环境变量。

方法2：使用DefinePlugin

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": "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"
},

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

console.log(process.env.NODE_ENV); // 打印结果为 'development'

发现process.env.NODE_ENV已经被作为全局变量打印出来了，因此在项目打包中为了区分开发环境和正式环境我们可以使用这种方法。

关于cross-env

什么是cross-env呢？
它是运行跨平台设置和使用环境变量的脚本。
它的作用是啥？
当我们使用DefinePlugin这种方法设置NODE_ENV时，大多数windows命令会提示将会阻塞或者异常，或者windows不支持NODE_ENV=development的这样的设置方式，会报错。因此cross-env出现了。我们可以使用cross-env命令来实现全开发平台的兼容。
要使用该命令的话，我们首先需要在我们的项目中安装该命令：

npm install --save-dev cross-env

在package.json中的scripts命令如下：

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

三、vue-cli3.0中的process.env.NODE_ENV

使用vue-cli3构建的项目就简单多了，因为vue-cli3使用上述的DefinePlugin方式帮你把process.env.NODE_ENV配置好了，我们不需要再自己去配置。
它自带了三种模式：

development：在vue-cli-service serve下，即开发环境使用
production：在vue-cli-service build和vue-cli-service test:e2e下，即正式环境使用
test：在vue-cli-service test:unit下使用

在package.json中的scripts命令如下

{"name": "","version": "0.1.0","private": true,"scripts": {"dev": "vue-cli-service serve", //本地开发运行，会把process.env.NODE_ENV设置为'development'"build": "vue-cli-service build", //默认打包模式，会把process.env.NODE_ENV设置为'production'},"dependencies": {}
}

参考自：https://www.cnblogs.com/tugenhua0707/p/9780621.html

作者：西瓜鱼仔
链接：https://www.jianshu.com/p/f4638f5df1c7
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

转载于：https://www.pianshen.com/article/18571709067/

Vue中process.env.NODE_ENV详解相关推荐

环境变量process.env.NODE_ENV详解
process.env.NODE_ENV详解前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 一. p ...
process.env.NODE_ENV详解
一. process.env.NODE_ENV是什么? 在node中,有全局变量process表示的是当前的node进程. process.env包含着关于系统环境的信息,但是process.env中 ...
keep alive PHP,vue中keep-alive使用方法详解
这次给大家带来vue中keep-alive使用方法详解,vue中keep-alive使用的注意事项有哪些,下面就是实战案例,一起来看一下. 1.keep-alive的作用以及好处在做电商有关的项目中 ...
Vue 中的 ref 属性详解
Vue 中的 ref 属性详解我们先来读一下vue的官方文档我们来分析官方文档首先ref的引用是相当于一个DOM节点(如果是子组件则指向的是其实例),而且是一个string类型的值. 通俗的将就 ...
vue中 process.env与process.VUE_CLI_SERVICE
在vue中设置环境变量离不开process.env属性,那么如何设置自定义环境变更呢? 可以通过设置.env文件或者借助process.VUE_CLI_SERVICE来设置 process proce ...
【CSDN软件工程师能力认证学习精选】Vue 中的事件处理机制详解
CSDN软件工程师能力认证(以下简称C系列认证)是由中国软件开发者网CSDN制定并推出的一个能力认证标准.C系列认证历经近一年的实际线下调研.考察.迭代.测试,并梳理出软件工程师开发过程中所需的各项技 ...
Vue中created和mounted详解
目录一.生命周期概念二.浏览器渲染过程三.生命周期中的浏览器渲染 beforeCreate阶段 created阶段 beforeMount阶段 mounted阶段四.使用场景五.常见相关问题 ...
Vue 中的 Render 全面详解 (渲染函数 JSX)
相信大家都或多或少的在 code 中见过或使用过 Render,如果你对它还是一脸懵逼,那就快上车!今天就带你来盘它.附 Element 表格自定义全选示例. 文章目录一.Render 的资料简介 ...
dockerfile中的env指令_Dockerfile中的ENV指令详解
1. Dockerfile中的ENV指令用以定义镜像的环境变量.示例如下: RUN set -ex && apt-get update && apt-get insta ...

Vue中process.env.NODE_ENV详解