功能效果图如下：

vConsole插件的npm地址：https://www.npmjs.com/package/vconsole

开发环境，因在浏览器，所以不需要vConsole；

生产环境，给用户看的，不能有vConsole；

测试环境，因H5页面是移动端使用的，所以需要vConsole。

因此要在Vue项目里配置不同的环境。

1、在项目根目录下，新建3个环境配置文件

.env.development

.env.mtest

.env.production

2、文件里可以配置需要根据环境切换的任意变量

(1)自定义变量名以“VUE_APP_”开头：development=>开发；mtest=>测试；production=>生产

(2)配置环境名的变量名是“NODE_ENV”

3、修改src下的main.js文件

将：

new Vue({

render: h => h(App),

router

}).$mount('#app')

修改为：

const template= {

render: h => h(App),

router

}

/* eslint-disable no-new */

let NODE_ENV = process.env.NODE_ENV

switch (NODE_ENV) {

case 'development':

new Vue(template).$mount('#app')

break

case 'production':

new Vue(template).$mount('#app')

break

case 'mtest':

var VConsole = require('vconsole')

new VConsole()

new Vue(template).$mount('#app')

break

default:

break

}

4、修改根目录下的package.json文件的“script”对象，新增一条“mtest”

5、运行以下命令行，打包出来，就是顶部的效果图了

npm run mtest