vue-cli配置不同环境加载vconsole

安装依赖

npm install cross-env --save-dev

安装vconsele-webpack-plugin

npm install vconsole-webpack-plugin --save-dev

修改webpack.base.conf.js

...
const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入vConstle
...

// process.env.NODE_ENV = 'production' 注释掉这句话

module.exports = {
	...
	plugins: [
		...
		 new vConsolePlugin({
	     	enable: process.env.NODE_ENV === 'st'
	    })
	],
	output: {
    	path: config.build.assetsRoot,
    	filename: 'bundle.[hash:4].js',
    	publicPath: process.env.NODE_ENV === 'production' || process.env.NODE_ENV === 'st' ? 
      		config.build.assetsPublicPath : config.dev.assetsPublicPath
  }
	...
}

修改package.json

{
	...
	"script": {
		...
		"build:st": "cross-env NODE_ENV=production node build/build.js --env=production",
		"build:prod": "cross-env NODE_ENV=st node build/build.js --env=st"
	}
	...
}

创建一个st.env.js

config->st.env.js

'use strict'
module.exports = {
	NODE_ENV: '"st"'
}

修改打包配置文件webpack.prod.conf.js

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

配置好这些，运行npm run build:st来进行公司测试环境打包，并且带有vconsole，npm run build:prod来进行线上环境打包。

参考文章：
webpack 引用vconsole
vue不同环境配置不同打包命令