脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue项目之安装引入使用vconsole

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

总结

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

您可能感兴趣的文章:

相关文章

最新评论