vue cli2.x配置多环境打包

首先说下自己遇到的坑，搞了半天。

开始使用过的node版本是6.3.0，配置完毕运行打包命令一直报错，后来，删除了node_modules node使用8.9.0版本,运行npm i 才可以。

一、config/目录中复制 prod.env.js 修改为test.env.js

'use strict'
 module.exports = {
   NODE_ENV: '"testing"',
   ENV_CONFIG: '"test"'
 }

二、prod.env.js 修改

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"'
}

三、dev.env.js

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ENV_CONFIG: '"dev"'
})

四、config/index.js文件修改, build中添加prodEnv, testEnv, devEnv

打包以后访问地址，不同的环境使用不同的配置。
...
  build: {
    prodEnv: require('./prod.env'),
    testEnv: require('./test.env'),
    devEnv: require('./dev.env'),
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
...

五、build/webpack.prod.conf.js文件修改，修改env

// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')
const env = config.build[process.env.ENV_CONFIG+'Env']
console.log(env, process.env.ENV_CONFIG, '环境变量')

六、修改build/build.js文件，打包的时候可以显示环境

const spinner = ora('正在打包... ' + process.env.ENV_CONFIG + '环境')

七、配置package.json文件，配置打包命令

"build": "node build/build.js",
"build--dev": "cross-env NODE_ENV=dev 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"

八、运行命令就可以实现分环境打包了

npm run build--dev
npm run build--test
npm run build--prod

最后，项目中使用axio根据不同环境配置不同的请求接口地址，就可以实现打包不同环境，调用不同环境地址接口。