vue cli2.x配置多環境打包

一、安裝

npm install --save-dev cross-env

二、配置步驟

1、修改config下的文件

//test.env.js

'use strict'
module.exports = {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"test"',
  BASE_API:'"http://10.20.2.177:12120/api"'
}

 //prod.env.js

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"prod"',
  BASE_API:'"http://10.20.2.177:12121/api"'
}

 //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"',
  BASE_API:'"http://10.20.2.177:12120/api"'
})

 //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'),
...

 2、修改build/build.js文件，打包的時候可以顯示環境

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

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

 "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"

 4、運行命令就可以實現分環境打包了

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

最后，項目中使用axio根據不同環境配置不同的請求接口地址，就可以實現打包不同環境，調用不同環境地址接口。

可打印process.env.NODE_ENV查看。

配置完成之后發現一個問題，就是以往的項目運行npm run dev會自動打開默認的瀏覽器，但這一次自己配置並沒有。

解決方法：修改config/index.js

autoOpenBrowser: true,  //是否默認打開瀏覽器,默認是false，改為true即可