一、process.env

查阅文档的时候可以看到这样一句话：process 对象提供有关当前 Node.js 进程的信息并对其进行控制。

const process = require('node:process');

在计组的知识点中我们知道：process(进程)是系统进行资源分配和调度的基本单位，是操作系统结构的基础。那么，在node.js中，process是否也有操作系统结构的信息呢？

打印一下看看：

const process = require('process')
const express = require('express')
const app = express()

app.get('/',(req,res)=>{
    console.log(process);
})

app.listen(port, host)

访问localhost:3000后查看控制台：

可以看到，process代表的值是计算机系统相关的信息，而process.env则表示的是系统环境变量。

理解：process可以看作是node.js中的一个全局变量。

二、NODE_ENV

注意：我本来想在文档中找找这个属性的，可是它并不存在于文档中，这是因为，NODE_ENV仅仅是一个自定义变量，据说最早是express社区中流传这个自定义变量，后来慢慢就成为了前端开发中的一个使用规范。

注意看上面那一张图片中框起来的部分，为什么会加上这个环境变量呢？

这是因为：在开发的过程中，我们可能需要同时面临多种环境。比如：

• 开发：API_URL =Ihttp://127.0.0.1:3000
• 线上部署环境：API_URL =https://imNeko:3000

这也是为什么，有时候我们在开发的时候感觉代码项目没有问题，可是部署到线上时出现了差错。

在这里我以一个基于Nuxt.js的项目中的package.json来举例：

"scripts": {
    // 让 cross-env 把 NODE_ENV 设置为 development, 再运行指定文件 server/index.js
    "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
    "build": "nuxt build",
    "start": "cross-env NODE_ENV=production node server/index.js",
    "generate": "nuxt generate"
},

从上面的代码可以看出：

当我们执行npm run dev的时候，NODE_ENV 将会被注入到 process.env 对象上，并且值为 development，我们 只 可以在 server/index.js 脚本中以及它所引入的脚本中访问到 process.env.NODE_ENV，而无法在其它脚本中访问

不过，如果采用的是webpack打包方式，注册下面这个插件既可以让其他文件访问到process.env.NODE_ENV

const webpack = require('webpack');
module.exports = {
  // ...
  plugins: [
    // DefinePlugin允许我们创建全局变量，可以在编译时进行设置
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': '"development"'
    })
  ]
  // ...
}

现在看看如何在项目中切换环境变量：

let env = process.env.NODE_ENV
let cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
let cssSourceMapProduct = (env === 'production' && config.build.productionSourceMap)
let useCssSourceMap = cssSourceMapDev || cssSourceMapProduct

我们可以根据process.env.NODE_ENV的值来选择编译打包什么文件。

2.1 设置NODE_ENV

2.1.1临时设置

在cmd窗口中输入这段代码：

set NODE_ENV = production
// set NODE_ENV = development

然后打印process：

2.1.2永久设置

在系统环境变量下面手动添加即可。

process.env.NODE_ENV详解

前几天一个月薪35k的兄弟，给我推了一个人工智能学习网站，看了一段时间挺有意思的。包括语音识别、机器翻译等从基础到实战都有，很详细，分享给大家。

一、 process.env.NODE_ENV是什么？

在node中，有全局变量process表示的是当前的node进程。

process.env包含着关于系统环境的信息，但是process.env中并不存在NODE_ENV。

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

例如：

process.env.NODE_ENV === "development" ? "测试/开发地址" : "生产环境地址"

通过环境变量来区分开发环境还是生产环境，当目前处于开发环境，环境变量为development；如果当前环境是生产环境，环境变量是production。提出来封装，抛出对应环境的服务。

可以在axios创建实例的时候，把这个baseUrl导入，使用。

import baseUrl from './config'
const service = axios.create({
  baseUrl,  // 设置全局基地址
  timeOut: 5000,  // 设置超时时间
}) 

如果我想在vue.config.js中动态设置反向代理

devServer: {
    proxy: { // 反向代理
      '/api': {
        target: process.env.VUE_APP_BASE_API,
        pathRewrite: {
          '^/api': ''
        },
        logLevel: 'debug', // 可以在终端窗口看到真实代理地址 
      }
    }
  }

Vue配置环境变量 原来是这么使用的呀

Vue配置多环境变量,原来是这么回事啊

为了查看 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": {
  }
}

参考：
process.env.NODE_ENV详解
理解webpack之process.env.NODE_ENV详解(十八)
根据process.env.NODE_ENV配置本地/测试/生产环境的接口请求地址

一文弄懂如何在 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/