AUBREY

SOMETIMES LOVE JUST AIN'T ENOUGH

VUE移动端项目配置vConsole控制台功能

功能效果图如下:

 

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

 

发表评论

电子邮件地址不会被公开。 必填项已用*标注