Code前端首页关于Code前端联系我们
首页 前端开发Vue正文

或者用yarn

terry 11小时前 阅读数 175 #Vue

H5项目开发调试为什么首选VConsole？

很多刚开始做Vue3 H5的同学，可能第一反应还是插数据线连电脑Chrome DevTools，或者用微信开发者工具的真机调试，但这俩都有硬伤：Chrome DevTools插线太麻烦，有时候信号弱或者数据线坏了根本连不上；微信的真机调试虽然还行，但得登录账号、扫码授权，遇到非微信生态的H5（比如支付宝小程序内嵌、公司内部测试APP的WebView）完全没用。 这时候VConsole就显优势了——它是一个纯前端的轻量级调试面板，不用连任何外部设备，只要在移动端打开页面，手指轻轻点一下（或者其他自定义触发方式）就能弹出面板，能看Console日志、Network请求、LocalStorage/Cookies/SessionStorage存储、DOM结构，还有性能、系统信息这些，功能覆盖Chrome DevTools的移动端常用部分，体积也只有几十KB，完全不会影响生产环境的加载速度。

Vue3项目里接入VConsole，有哪些不同的方式？

现在Vue3的主流构建工具是Vite和Webpack5,接入VConsole的方法要分这俩说，还有一种是纯CDN引入的方式，适合没有用构建工具的静态Vue3页面。

第一种：纯CDN引入（适合静态页面或紧急临时调试）

如果你的Vue3页面是直接用<script>引入Vue源码写的，没有打包流程，用CDN最快，只需要在index.html的<head>或者<body>最后面（推荐最后，避免阻塞渲染）加VConsole的CDN脚本，然后初始化一下就行：

<!-- 引入Vue3 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<!-- 引入VConsole -->
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // 初始化
  const vConsole = new VConsole();
</script>
<div id="app">
  {{ message }}
</div>
<script>
  const { createApp } = Vue;
  createApp({
    data() {
      return { message: 'Hello Vue3 + VConsole!' }
    }
  }).mount('#app');
</script>

这种方法虽然快,但有个缺点：你得手动控制生产环境要不要引入，不然用户打开你的页面也能随便看日志和请求，太不安全了。

第二种：Vite构建工具接入（主流方式之一）

Vite是Vue官方推荐的下一代构建工具,接入VConsole有两种常用方案：一种是直接在入口文件main.js里引入，用环境变量控制是否初始化；另一种是用专门的Vite插件，配置更灵活。

方案A：入口文件引入+环境变量控制

先安装VConsole：

npm install vconsole -Dyarn add vconsole -D
# 或者pnpm
pnpm add vconsole -D

这里要注意,VConsole一定要加-D作为开发依赖，生产环境打包时会自动排除，不用手动删代码。 然后在项目根目录下创建.env.development文件（开发环境的环境变量文件），写入：

# 开启VConsole
VITE_VCONSOLE_ENABLE=true

如果是.env.production，可以写VITE_VCONSOLE_ENABLE=false或者直接不写，默认就是不开启。 接下来修改入口文件main.js：

import { createApp } from 'vue'
import App from './App.vue'
// 只有在VITE_VCONSOLE_ENABLE为true时才引入和初始化
if (import.meta.env.VITE_VCONSOLE_ENABLE === 'true') {
  import('vconsole').then((module) => {
    const VConsole = module.default;
    new VConsole({
      // 可以在这里加一些基础配置，比如面板的默认位置、日志条数限制
      defaultPlugins: ['system', 'network', 'element', 'storage', 'log'],
      maxLogNumber: 1000,
      theme: 'light' // 或者dark
    });
  })
}
createApp(App).mount('#app')

这里用了动态导入import()，是因为Vite在生产环境打包时，虽然开发依赖会被排除，但如果直接用静态导入import VConsole from 'vconsole'，可能会残留一些代码？反正动态导入更稳妥，只有在环境变量满足条件时才会加载VConsole的代码，生产环境完全不会有体积占用。

方案B：用Vite插件vite-plugin-vconsole

这个插件是专门给Vite+Vue3用的，比入口文件引入更方便，支持更细致的配置，比如自定义触发方式（默认是双击屏幕、或者长按某个元素，插件里可以改）、生产环境也能开启（但强烈不建议）、还能注入一些自定义的调试变量。 先安装插件和VConsole：

npm install vconsole vite-plugin-vconsole -D

然后修改vite.config.js：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vconsolePlugin from 'vite-plugin-vconsole'
export default defineConfig({
  plugins: [
    vue(),
    vconsolePlugin({
      // 这里配置环境变量，只有当VITE_VCONSOLE_ENABLE为true时才开启
      enabled: process.env.VITE_VCONSOLE_ENABLE === 'true',
      // 动态导入，减少生产环境的体积残留
      dynamicImport: true,
      // VConsole的配置
      config: {
        defaultPlugins: ['system', 'network', 'element', 'storage', 'log'],
        maxLogNumber: 1000,
        theme: 'light',
        // 自定义触发方式：比如长按300毫秒
        trigger: 'longPress',
        triggerTime: 300,
        // 或者自定义元素ID，点击这个ID的元素就弹出面板
        // triggerElement: '#vconsole-btn'
      }
    })
  ],
  // 其他Vite配置...
})

还要注意,用这个插件的话，环境变量要放在根目录的.env文件里，而且必须以VITE_开头，Vite才会识别，这个插件已经帮你处理了引入和初始化的逻辑，不需要在main.js里写任何代码了，非常省心。

第三种：Webpack5构建工具接入（适合旧项目升级Vue3）

如果你的项目是用Webpack5搭建的（比如用Vue CLI 5.x创建的项目，默认就是Webpack5），接入VConsole的方法和Vite类似，也是两种：入口文件引入+环境变量控制，或者用专门的插件。

方案A：入口文件引入+环境变量控制

先安装VConsole：

npm install vconsole -D

然后在项目根目录下创建.env.development文件，写入：

# 开启VConsole，注意Vue CLI的环境变量必须以VUE_APP_开头
VUE_APP_VCONSOLE_ENABLE=true

修改入口文件main.js：

import { createApp } from 'vue'
import App from './App.vue'
// 只有在VUE_APP_VCONSOLE_ENABLE为true时才引入和初始化
if (process.env.VUE_APP_VCONSOLE_ENABLE === 'true') {
  // 这里可以用静态导入，因为Vue CLI的开发依赖在生产环境打包时会自动排除
  const VConsole = require('vconsole');
  new VConsole({
    defaultPlugins: ['system', 'network', 'element', 'storage', 'log'],
    maxLogNumber: 1000,
    theme: 'light'
  });
}
createApp(App).mount('#app')

方案B：用Webpack插件vconsole-webpack-plugin

这个插件也是专门给Webpack用的,配置和vite-plugin-vconsole差不多： 先安装插件和VConsole：

npm install vconsole vconsole-webpack-plugin -D

然后修改vue.config.js（因为Vue CLI 5.x的配置文件是这个）：

const { defineConfig } = require('@vue/cli-service')
const VConsolePlugin = require('vconsole-webpack-plugin')
module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: config => {
    // 只有在开发环境或者自定义开启时才添加插件
    if (process.env.NODE_ENV === 'development' || process.env.VUE_APP_VCONSOLE_ENABLE === 'true') {
      config.plugins.push(
        new VConsolePlugin({
          enable: true,
          config: {
            defaultPlugins: ['system', 'network', 'element', 'storage', 'log'],
            maxLogNumber: 1000,
            theme: 'light'
          }
        })
      )
    }
  }
})

Vue3项目里用VConsole，有没有什么实用的高级配置？

基础配置大家都会,但有些高级配置能让你的调试效率翻倍，

自定义触发方式

默认的触发方式是双击屏幕,但有时候在开发滑动页面的时候，一不小心就双击弹出面板了，很烦人，这时候可以改成长按或者自定义按钮： 比如在Vite插件里配置trigger: 'longPress'和triggerTime: 500（长按500毫秒），或者在页面里加一个隐藏的按钮，只有开发环境才显示，然后配置triggerElement: '#vconsole-btn'：

<template>
  <div>
    <!-- 只有开发环境才显示的按钮 -->
    <button 
      v-if="import.meta.env.DEV" 
      id="vconsole-btn"
      style="position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background: #409eff; color: white; border: none; z-index: 9999;"
    >调试</button>
    <!-- 其他内容... -->
  </div>
</template>

Webpack项目里可以用process.env.NODE_ENV === 'development'来控制按钮的显示。

自定义调试插件

VConsole支持自定义插件,你可以把一些常用的调试功能做成插件，比如Vue3的Pinia状态查看、组合式API的ref/reactive数据查看，这里举一个简单的例子，做一个显示当前时间的插件： 先在入口文件或者Vite/Webpack的配置里，初始化VConsole的时候注册插件：

if (import.meta.env.VITE_VCONSOLE_ENABLE === 'true') {
  import('vconsole').then((module) => {
    const VConsole = module.default;
    const vConsole = new VConsole({
      defaultPlugins: ['system', 'network', 'element', 'storage', 'log'],
      maxLogNumber: 1000,
      theme: 'light'
    });
    // 创建自定义插件
    const myPlugin = new VConsole.VConsolePlugin('time', '当前时间');
    // 渲染插件面板的内容
    myPlugin.on('renderTab', (callback) => {
      const html = '<div id="my-plugin-time" style="padding: 20px; font-size: 24px; text-align: center;">点击刷新时间</div>';
      callback(html);
    });
    // 插件面板显示时的回调
    myPlugin.on('show', () => {
      const div = document.getElementById('my-plugin-time');
      div.innerText = new Date().toLocaleString();
    });
    // 点击插件面板时的回调
    myPlugin.on('ready', () => {
      const div = document.getElementById('my-plugin-time');
      div.addEventListener('click', () => {
        div.innerText = new Date().toLocaleString();
      });
    });
    // 注册插件
    vConsole.addPlugin(myPlugin);
  })
}

这样打开VConsole的面板,就会多一个“当前时间”的标签页，点击就能刷新时间，更复杂的插件比如Pinia状态查看，可以去GitHub上找现成的，或者自己参考VConsole的官方文档写。

过滤敏感信息

有时候Network请求里会有一些敏感信息,比如用户的token、密码，这些信息如果被别人看到（虽然生产环境我们已经关掉VConsole了，但开发环境有时候会截图发给同事），就会有安全隐患，这时候可以配置VConsole的Network插件，过滤敏感信息：

const vConsole = new VConsole({
  defaultPlugins: ['system', 'network', 'element', 'storage', 'log'],
  network: {
    // 过滤请求头里的Authorization
    ignoreHeaders: ['Authorization'],
    // 过滤请求体或响应体里的password、token等字段
    filterRequestData: (data) => {
      if (typeof data === 'object' && data !== null) {
        const newData = JSON.parse(JSON.stringify(data));
        if (newData.password) newData.password = '***';
        if (newData.token) newData.token = '***';
        return newData;
      }
      return data;
    },
    filterResponseData: (data) => {
      if (typeof data === 'object' && data !== null) {
        const newData = JSON.parse(JSON.stringify(data));
        if (newData.data?.token) newData.data.token = '***';
        return newData;
      }
      return data;
    }
  }
});

Vue3项目里用VConsole，有哪些常见的坑？

  1. 环境变量没有生效：不管是Vite还是Webpack，环境变量的前缀都必须注意——Vite是VITE_，Vue CLI/Webpack是VUE_APP_，而且修改了环境变量之后必须重启构建工具，不然不会生效。
  2. 生产环境不小心开启了VConsole：这个是最严重的坑！一定要在.env.production里明确设置VITE_VCONSOLE_ENABLE=false或者VUE_APP_VCONSOLE_ENABLE=false，或者在配置文件里只在NODE_ENV === 'development'时才开启。
  3. 动态导入时VConsole加载慢：有时候页面已经加载完了，但VConsole的面板还没弹出来，这是因为动态导入是异步的，可以把config: { dynamicImport: false }关掉（但要注意开发依赖在生产环境的排除），或者在入口文件里加一个提示。
  4. Network插件看不到某些请求：比如WebSocket请求、或者用Fetch API但没有配置mode: 'cors'的跨域请求，VConsole可能看不到，WebSocket请求的话，可以自己写一个自定义插件来监听，跨域请求的话，还是建议用Chrome DevTools或者微信开发者工具看。

做Vue3 H5移动端项目，VConsole绝对是调试神器，不用连任何外部设备，随时随地都能看日志、请求、存储这些信息，接入方式要根据你的构建工具来选，Vite推荐用vite-plugin-vconsole，Webpack推荐用vconsole-webpack-plugin，纯静态页面用CDN引入，高级配置可以让你的调试效率更高，比如自定义触发方式、自定义插件、过滤敏感信息，最后一定要注意，生产环境绝对不能开启VConsole，不然会有安全隐患和体积问题。

版权声明

本文仅代表作者观点，不代表Code前端网立场。
本文系作者Code前端网发表，如需转载，请注明页面地址。

上一篇：Vue3新手做移动端电商首页，用Vant怎么快速搞定踩坑又少？ 下一篇：Vue3+Vue-router4从0到1完整搭建怎么做？新手老手都该避开的坑有哪些？
相关文章
terry

terry

作者文章
浏览更多
热门
最新文章
标签列表
Copyright by code前端网 All Rights Reserved.粤ICP备12067512号-4

Powered By Z-BlogPHP Theme By 编程老白