Vue项目之安装引入使用vconsole方式(生产环境不显示)

弄死都不帅

vue2中安装引入使用vconsole


前言

最近在做公司移动端的前端开发的时候，为了让测试人员能够在手机、平板上也能看到像浏览器f12那样的调试工具，便于查看日志数据和网络请求等，专门搜了一下，发现这个vConsole官方的调试工具真的很强大，十分好用。

vConsole的简介

• 一个轻量、可拓展、针对手机网页移动端的前端开发者调试面板。
  
• vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。
  
• 现在 vConsole 是微信小程序的官方调试工具
  

主要功能

• 日志(Logs)：
  1. console.log|info|error|...

  复制代码
• 网络(Network)：
  1. XMLHttpRequest

  复制代码
  ,
  1. Fetch

  复制代码
  ,
  1. sendBeacon

  复制代码
• 节点(Element)： HTML 节点树
  
• 存储(Storage)：
  1. Cookies

  复制代码
  ,
  1. LocalStorage

  复制代码
  ,
  1. SessionStorage

  复制代码
• 手动执行 JS 命令行
  
• 自定义插件
  

安装

• 方式一：npm:
  

1. npm install vconsole -D

复制代码

• 方式二：CDN：
  

1. <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
   
2. <script>
   
3.   var vConsole = new window.VConsole();
   
4. </script>

复制代码

package.json中，我vconsole的版本

引入

在main.js中
1、直接使用

1. import VConsole from 'vconsole'
   
2. Vue.use(vConsole)

复制代码

2、实际项目开发中，往往有多个环境。
所以一般做一下判断，生产环境运行就不用显示了

1. import VConsole from 'vconsole'
   
2. const isProd = process.env.NODE_ENV === 'production'
   
3. if (!isProd) {
   
4.   const vConsole = new VConsole()
   
5.   Vue.use(vConsole)
   
6. }

复制代码

使用

运行项目就直接出现右下角这按钮，点击就能玩了

直接进入调试模式，不分方便，和浏览器f12一样

官网演示：http://wechatfe.github.io/vconsole/demo.html

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/328934yhq.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！