如何在移动端项目里面使用console

我的项目是基于vue-cli创建的项目哈

平时我们和客户端(安卓对接),例如想看打印日志,那不得不提到一个利器,vconsole,如何使用,我用两种方式展示 建议第二种,因为这里可以去设置在什么环境使用,可配置在不同环境中是否显示

1第一种 直接在main.js中引入 (任何项目都可以)

1.1 先将vconsole安装到项目中

npm install vconsole --save

1.2在main.js同级建立一个vconsole.js得文件

import Vconsole from 'vconsole'
let vConsole = null
if (process.env.NODE_ENV !== 'production') {
  vConsole = new Vconsole()
}
export default vConsole

1.3在main.js中引入(看这里得两行得是新加的)

  import Vue from 'vue'
  import App from './App'
  import router from './router'
  import vConsole from './vconsole'  // 看这里
  Vue.config.productionTip = false
  /* eslint-disable no-new */
  new Vue({
    el: '#app',
    router,
    vConsole, // 看这里
    components: { App },
    template: '<App/>'
  })

1.4 效果

2.第二种 使用webpack的里面的包 （依赖于webpack)

2.1 安装包

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

2.2 在vue.config.js里面写入

const VConsolePlugin = require('vconsole-webpack-plugin')

const vcPlugin = new VConsolePlugin({
  filter: [],
  enable: process.env.NODE_ENV !== 'production', // 生产环境不需要vconsole
})
module.exports = {
  configureWebpack: config => {
    config.externals = {
    }
    config.plugins = [vcPlugin, ...config.plugins]
  },
}