功能效果图如下：

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