【Vue3 + Vite + TS】引入移动端调试面板Vconsole(全网最简单、最实用)

原创已于 2023-04-19 10:42:29 修改 · 3.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue3 #Vconsole #移动端调试 #原力计划

于 2023-04-19 10:38:22 首次发布

web前端同时被 3 个专栏收录

79 篇文章

订阅专栏

JavaScript

64 篇文章

订阅专栏

9 篇文章

订阅专栏

文章介绍了如何在Vue3应用中集成Vconsole进行移动端调试。首先，通过npm安装Vconsole，然后在main.ts文件里导入并根据import.meta.env.VITE_APP_ENV的值（此处为uat）决定是否实例化Vconsole。这样，当环境为uat时，Vconsole面板将被启用，提供移动端的调试支持。

Vue3引入移动端调试面板Vconsole

$ npm install vconsole

在这里插入图片描述
安装完成后在 main.ts引入

const env = import.meta.env.VITE_APP_ENV // 获取配置信息
import Vconsole from 'vconsole' // 引入 vconsole
if(env === 'uat') new Vconsole() // 如所有环境均需开启 则不需要判断