vue+webpack多环境打包配置

我是用的vue-cli快速生成的项目结构，故下文以此为基础：

1、config/prod.env.js

// 原来代码
'use strict'
module.exports = {
  NODE_ENV: '"production"'
}
// 修改后代码
'use strict'
module.exports = {
  NODE_ENV: '"production"',
  ENV_CONFIG: '"http://生产环境用到的地址"'  // 新增
  // ENV_CONFIG：自己定义即可，后面在页面种如果用到 也是这个名称
}

2、config/test.env.js

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

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"'
})
// 修改后代码
'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"testing"',
  ENV_CONFIG: '"http://39.108.167.173:9950"' // 新增
})

3、build/webpack.prod.conf.js

// 原代码
const env = require('../config/prod.env')
// 修改后代码
// 注释掉 const env = require('../config/prod.env') 
const env = config.build[process.env.env_config+'Env'] // 新增

4、build/build.js

// 原代码
const spinner = ora('building for production...')

spinner.start()
// 修改后代码
const spinner = ora('building for' + process.env.NODE_ENV + 'of' + process.env.ENV_CONFIG + 'mode...') 
// 新增 'ENV_CONFIG '即是我们在config/prod.conf.js-test.conf.js下，我们定义的路径名称

spinner.start()

5、config/index.js 的build下

// 原代码
build: {
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),
// 修改后的代码
build: {
    testEnv: require('./test.env'), //新增
    prodEnv: require('./prod.env'), //新增
    // Template for index.html
    index: path.resolve(__dirname, '../dist/index.html'),

6、build/webpack.base.conf.js 下的output

 // 原代码
 output: {
  path: config.build.assetsRoot,
  filename: '[name].js',
  publicPath: process.env.NODE_ENV === 'production'
    ? config.build.assetsPublicPath
    : config.dev.assetsPublicPath
}


// 修改后的代码
output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : (process.env.NODE_ENV === 'testing' ? config.build.assetsPublicPath : config.dev.assetsPublicPath) //增加判断
  },

7、package.json 下的scripts

"scripts": {
	// 新增
	"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"
}

8、安装cross-env，npm i --save-dev cross-env【cross-env能跨平台地设置及使用环境变量】

完成以上配置后，就可以用 npm run build:test和npm run build:prod进行不同环境的打包；在页面可以通过process.env.ENV_CONFIG获取到所配置的参数，但是注意ENV_CONFIG
是我们自己起的名字，前后以及在使用过程中，一定要注意一致，反正我是踩坑了【笑哭】