一、cross-env官方介绍

问题：当你像这样设置环境变量时，大多数 Windows 命令提示符都会被阻塞 NODE_ENV=production。（ Windows 上的 Bash 是个例外，它使用本机 Bash。）同样，Windows 和 POSIX 命令使用环境变量的方式也有所不同。对于 POSIX，您使用：$ENV_VAR 在 Windows 上您使用%ENV_VAR%.

解决方案：cross-env这样一来，您就可以拥有一个命令，而不必担心为平台正确设置或使用环境变量。就像它在 POSIX 系统上运行时一样设置它，并且cross-env会正确设置它。

二、cross-env 安装

npm install --save-dev cross-env // 安装cross-env

三、使用

官方例子：

{
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
  }
}

本地写法(修改本地package.json文件中scripts)：

{
  "scripts": {
    "build": "node build/build.js",
    "build:dev": "cross-env NODE_ENV=development ENV_CONFIG=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=testing ENV_CONFIG=test node build/build.js",
    "build:prod": "cross-env NODE_ENV=production ENV_CONFIG=prod node build/build.js"
  }
}

四、多环境配置文件的修改

修改dev.env.js文件：

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"', // 这个是区分打包后环境的
  API_ROOT: '"http://www.development.com/"' // 开发环境
})

修改test.env.js文件

'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"', // 这个是区分打包后环境的
  API_ROOT: '"https://www.ceshi.com/"' // 测试环境
})

修改prod.env.js文件

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"', // 这个是区分打包后环境的
  API_ROOT: '"https://www.production.com/"' // 生产环境
}

构建脚本

npm run dev/start   运行本地环境
npm run build:dev   本地环境打包
npm run build:test  测试环境打包
npm run build/build:prod  正式环境打包

package.json文件中scripts命令行里面 "NODE_ENV" 取值跟config文件夹下面，对应子js文件里变量 "NODE_ENV" 取值保持一致，即取值为 "production","ENV_CONFIG" 取值与 config/x.env.js 里面 变量 "ENV_CONFIG" 取值相同。

五、修改build/build.js(命令行加载提示语)

原始默认代码：

const spinner = ora('building for production...')

修改后的代码：

const spinner = ora('building for ' + process.env.env_config) 或者
const spinner = ora('构建' + process.env.env_config + '版本...')

六、修改build/webpack.prod.conf.js 文件(命令行加载提示语)

原始默认代码：

const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')

修改后的代码：

// process.env.NODE_ENV 取不到值所以上面方式弃用 使用process.env.env_config作为判断依据
const env = require('../config/' + process.env.env_config + '.env')