移动端vConsole调试

写移动端的时候如何调出vConsole的调试呢?

首先安装vConsole包

npm install vconsole

在main.js中引入后就可以使用console.log了

import Vconsole from 'vconsole';

但是还是需要判断环境 开发环境才需要vConsole 生产环境不需要

通过url判断现在是什么环境 在utils/config(可自定义文件夹) 写入方法 此方法同时可以判断环境来定义本地存储

let env = 'DEV' // 一般是dev开发环境
const { host } = window.location // 获取当前的host地址
if (host.includes('fat-xxx.xxx.cn')) { // fat环境  测试环境
  env = 'FAT'
} else if (host.includes('open.xxx.cn')) { // open环境 生产环境  
  env = 'PROD'
} else { // 其余的 dev环境，目前没有dev环境，暂时用fat环境
  // env = 'DEV';
  env = 'FAT'
}
 
 // 根据不同的环境来存储不同的key值
const storage = {
  set (key, value) {
    localStorage.setItem(env + key, JSON.stringify(value))
  },
  get (key) {
    const value = localStorage.getItem(env + key)
    return value && value !== 'undefined' ? JSON.parse(value) : ''
  },
  remove (key) {
    localStorage.removeItem(env + key)
  }
}

export default storage

然后引入文件

// 引入文件  这个文件里有根据目前的url判断现在是什么环境的方法
// 这个方法在笔记的通用方法文件夹里有写
import configUtils from '@/utils/config' 
 
// 如果不是生产环境 就使用vConsole  'prod是生产环境的意思'
if (configUtils.ENV !== 'PROD') {  
  const vConsole = new VConsole()
  Vue.use(vConsole)
}

第二种方法比较简单

判断的当前的环境是不是开发环境
process.env.NODE_ENV会根据现在的环境去找到对应的环境变量

• 也就是会去访问.env.development和.env.production文件
• 如果是开发的状态 所以访问的是.env.development
• 所以要在.env的文件里面配置NODE_ENV

然后判断当前的环境进行安装vConsole

if (process.env.NODE_ENV === 'development' && defaultSettings.vconsole) {
  const VConsole = require('vconsole')
  const my_console = new VConsole()
}