Vue项目之安装引入使用vconsole方式(生产环境不显示)
更新时间：2024年10月17日 10:44:56 作者：SuperYiY
在Vue2开发中,引入vConsole可以为移动端提供类似浏览器F12的调试工具,支持查看日志、网络请求等功能,vConsole是一个轻量、可拓展的前端调试面板,与框架无关,适用于多种前端框架,安装方法包括npm和CDN两种,可根据项目环境配置是否显示调试面板
vue2中安装引入使用vconsole
前言
最近在做公司移动端的前端开发的时候，为了让测试人员能够在手机、平板上也能看到像浏览器f12那样的调试工具，便于查看日志数据和网络请求等，专门搜了一下，发现这个vConsole官方的调试工具真的很强大，十分好用。
vConsole的简介
- 一个轻量、可拓展、针对手机网页移动端的前端开发者调试面板。
- vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。
- 现在 vConsole 是微信小程序的官方调试工具
主要功能
- 日志(Logs)：
console.log|info|error|... - 网络(Network)：
XMLHttpRequest,Fetch,sendBeacon - 节点(Element)： HTML 节点树
- 存储(Storage)：
Cookies,LocalStorage,SessionStorage - 手动执行 JS 命令行
- 自定义插件
安装
- 方式一：npm:
npm install vconsole -D
- 方式二：CDN：
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <script> var vConsole = new window.VConsole(); </script>
package.json中，我vconsole的版本
引入
在main.js中
1、直接使用
import VConsole from 'vconsole' Vue.use(vConsole)
2、实际项目开发中，往往有多个环境。
所以一般做一下判断，生产环境运行就不用显示了
import VConsole from 'vconsole'
const isProd = process.env.NODE_ENV === 'production'
if (!isProd) {
const vConsole = new VConsole()
Vue.use(vConsole)
}使用
运行项目就直接出现右下角这按钮，点击就能玩了
直接进入调试模式，不分方便，和浏览器f12一样
官网演示：http://wechatfe.github.io/vconsole/demo.html
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue.js暴露方法给WebView的使用操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要介绍了Vue基本使用之对象提供的属性功能实例详解，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-04-04
本文主要介绍了vue前端导出多级表头的excel表的示例代码,可以使用xlsx库来创建Excel文件,下面就来具体介绍一下,感兴趣的可以了解一下2024-06-06
vue3+springboot部署到Windows服务器的详细步骤
这篇文章主要介绍了vue3+springboot部署到Windows服务器,配置Nginx时，因为现在是把vue前端交给了Nginx代理，所以这里的端口号不一定是我们在vue项目中设置的端口号，本文给大家介绍的非常详细，需要的朋友参考下吧2022-10-10
这篇文章主要介绍了详解Vue项目部署遇到的问题及解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-01-01
这篇文章主要为大家详细介绍了vue component组件的使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-07-07
这篇文章主要介绍了vue项目优化首评加载速度，以及白屏时间过久的问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-09-09
在Vue应用中，我们通常需要实现分布式鉴权和认证，以确保用户的安全性和数据的保密性，本文将介绍在Vue中如何进行分布式鉴权与认证,需要的朋友可以参考下2023-06-06
详解vue中$nextTick和$forceUpdate的用法
这篇文章主要介绍了详解vue中$nextTick和$forceUpdate的用法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要为大家详细介绍了如何利用Vue编写一个数字华容道游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
最新评论