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

前端大斗师

已于 2023-04-19 10:42:29 修改

阅读量2.2k

点赞数 1

分类专栏： vue3 JavaScript web前端文章标签：前端 vue3 Vconsole 移动端调试原力计划

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

本文链接：https://blog.csdn.net/Web_chicken/article/details/130238421

版权

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

78 篇文章 12 订阅

订阅专栏

JavaScript

63 篇文章 4 订阅

订阅专栏

8 篇文章 3 订阅

订阅专栏

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() // 如所有环境均需开启 则不需要判断

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

前端大斗师

关注关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
【Vue3 + Vite + TS】引入移动端调试面板Vconsole(全网最简单、最实用)

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

扫一扫

专栏目录

vue-cli-plugin-vconsole:适用于vue-cli@3.0的VConsole插件

05-02

vue-cli-plugin-vconsole 适用于vue-cli@3.0的VConsole插件安装 vue add vconsole 尖端 VConsole插件会在开发环境中自动启用。您可以在vue配置中使用vconsole-webpack-plugin的选项，如下所示： // vue.config.js or configure in the pagckage.json. module . exports = { pluginOptions : { vconsole : { enable : true /* others... */ } } }

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化

05-12

vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...

1 条评论您还未登录，请先登录后发表或查看评论

Vue3 + Vite 页面白屏问题（开发环境+生产环境）

Yana's Blog

05-06

7271

在一次开发过程中，使用 Vue3 + Vite 做了几个简单页面，支持 PC 端和手机端， PC 端测试一切安好，手机端访问本地 IP 进行预览，苹果手机功能正常，但安卓手机直接白屏。

vue3+ts使用vConsole

2301_76315784的博客

05-11

1096

3、在vite.config.ts中配置。2、在main.ts中引入并使用。

Vue3+TS+Vite中 vConsole 插件的使用

前端菜菜DayDayUp的博客

08-29

1867

Vue3+TS+Vite中 vConsole 插件的使用

【unplugin】vite unplugin-auto-vconsole插件自动导入vconsole 生产环境根据链接参数动态加载vconsole代码，手机端不方便，希望用于生产调试时正常用户不需

页面仔的博客

06-27

572

当希望使用 vconsole，并且希望在生产环境使用，并且还不希望正常用户看到，并且还不希望占用正常用户加载速度或者加载的 js 体积时，你可能用得上例如生产环境http://baidu.com 这样访问，并不会加载或出现vconsole，减少正常用户的加载文件体积enable_console=1 这样访问，则自动加载可以帮助你快捷的引入 vconsole 以方便进行移动端的调试当你需要线上环境调试时只需要添加固定参数，即可动态加载并开启 vconsole,eg：http://baidu.com。

vue - vue项目中配置不同的环境是否显示vConsole

qq_43886365的博客

09-30

1972

vue项目中配置不同的环境是否显示vConsole

vue3+vite2+ts+vant3 项目demo

04-16

此项目按照大佬文章一步步学习搭建 https://juejin.cn/post/7036745610954801166?share_token=5dd94aae-bed2-4733-93ac-306118376443；感谢大佬

vue3+vite+ts 仿淘宝放大镜效果

09-17

1.本demo是一个类似于淘宝放大镜的效果。 2.使用vue3+vite搭建 3.实现了图片点击轮播和移入放大的效果 4.下载下来可直接使用，必须真实有问题可以直接提问

vue3+ts+vite+router+vuex+api请求封装

12-29

后台管理系统脚手架

vue项目移动端中使用vconsole，并配置在不同的环境是否显示

01-08

1.npm 安装 npm install vconsole 2.初始化 & 配置在入口文件main.js中加入以下代码 import Vconsole from 'vconsole'; const vConsole = new Vconsole(); 3.打印日志与 PC 端打印 log 一致，可直接使用 console.log() 等方法直接打印日志： console.log('Hello World'); 4.注意 VConsole 只是 vConsole 的原型，而非一个已实例化的对象。所以在手动 new 实例化之前，vConsole 不会被插入到网页中; 未加载 vCo

Vue3+Vite4+TS 后台模板

06-08

vue3+VITE4+TS 后台模板， vue3+VITE4+TS 后台模板

vue3+vite+qiankun+monorepo框架

08-03

vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+monorepo框架vue3+vite+qiankun+...

uniapp + vue3 +vite + ts + pinia 框架模板

01-31

uniapp + vue3 +vite + ts + pinia 框架模板包含登录 + 注册 + 修改密码 + tab页

vue3+vite+ts+antv/x6搭建的流程图编辑页面

最新发布

03-26

同时，还提供了一个拖拽组件栏，用户只需简单拖拽，即可将所需的组件添加到流程图中。除了节点的编辑，我们还为用户提供了一个属性配置栏。在这个栏目中，用户可以详细配置每个节点的属性，如名称等，使得流程图...

在Vue 3中引入VConsole的步骤

seimeii的博客

07-28

1778

在Vue 3中引入VConsole的步骤

vue项目引入vconsole插件

liumengyue的博客

09-02

4533

npm i vconsole 再main.js中引入 import VConsole from 'vconsole'; let vconsole = new VConsole(); export default vconsole;

【vue使用vconsole】

weixin_44430488的博客

11-26

165

开发vue微信h5的时无法看到控制台就可以使用vconsole 在main.js中加入 // import VConsole from 'vconsole'; // const vConsole = new VConsole(); 并下载vconsole依赖即可 npm install vconsole

南北极之间

07-06

2736

vite+vue3+ts 移动端项目

09-02

这是一个使用Vue3和Vite搭建的移动端项目，使用了Vant组件库。项目包括了类似淘宝放大镜效果的功能，包括图片点击轮播和移入放大的效果。它是一个交互式的项目，可以使用npm create vite@latest命令进行创建。在创建过程中，需要安装一些必要的包，比如create-vite和vue-cli。你可以参考示例项目vue3-vant-mobile来了解具体的实现方式和思路。123 #### 引用[.reference_title] - *1* [vue3+vite+ts 仿淘宝放大镜效果](https://download.csdn.net/download/qq_36493053/86542356)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [【从入门到提桶】vue3.2 + vite + vant + pinia + ts 移动端 h5 项目实践](https://blog.csdn.net/xxxzzzqqq_/article/details/129554703)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交

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

Vue3引入移动端调试面板Vconsole

“相关推荐”对你有帮助么？

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