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

        平时在web应用开发过程中,我们可以console.log去输出一些信息,但是在移动端,也就是在手机上,console.log的信息我们是看不到的,这时候就需要移动端调试工具vConsole

1. 依赖安装

npm install vconsole

或者

yarn add vconsole

或者

pnpm add vconsole

安装成功后在 package.json 中可以看到如下:证明安装成功

 

2.在Vue项目的入口文件(通常是main.js或main.ts)中导入VConsole 

import Vconsole from "vconsole";new Vconsole();

3.请注意,在生产环境下,你应该避免将VConsole包含在你的项目中。你可以使用条件语句来仅在开发和测试下引入VConsole,例如:

import Vconsole from "vconsole";if (import.meta.env.VITE_NODE_ENV !== "production") {// 测试和开发打开,生产不能打开new Vconsole();
}

注意:在 .env.production 配置文件中定义环境变量 VITE_NODE_ENV = production,环境变量必须以 VITE_开头,否者用上面 import.meta.env.环境变量 获取不到,如下图:

这样就行啦!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/58416.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

扫雷小游戏

目录 一.扫雷小游戏 二.游戏主体一览 ​编辑 三.模块化设计扫雷游戏 3.1打印欢迎菜单 3.2创建两个二维数组 3.3棋盘稍加修改 3.4布置雷 3.5排查雷 四.游戏总体代码 4.1game.h头文件 4.2game.c函数实现源文件 4.3游戏main函数主体 五.游戏效果图 一.扫雷小游戏 这是…

Jmeter+ServerAgent

一、Jmeter 下载 https://jmeter.apache.org/download_jmeter.cgi选择Binaries二进制下载 apache-jmeter-5.6.2.tgz 修改配置文件 jmeter下的bin目录,打开jmeter.properties 文件 languagezh_CN启动命令 cd apache-jmeter-5.6/bin sh jmeter二、ServerAgent 监…

nginx 托管vue项目配置

server {listen 80;server_name your_domain.com;location / {root /path/to/your/vue/project;index index.html;try_files $uri $uri/ /index.html;} }奇怪的现象,在vue路由中/会跳转到/abc/def,但如果直接输入/abc/def会显示404,添加 try_files $uri…

实战 图书馆系统管理案例

config :敏感的配置一般都是在配置中心配置,比如consul或者阿波罗上面controller :写一些handler的,拿到参数要去调用service层的逻辑。(只负责接受参数,怎么绑定参数,要去调用哪个service的&am…

Viobot输出数据说明

一.原始数据 1.ROS话题 1)相机原始图像数据 Type: sensor_msgs::Image Topic: 左目:/image_left 右目:/image_right 2)imu数据 Type: sensor_msgs::Imu Topic: /imu 3)TOF数据 点云数据: Type: sensor_msgs::P…

算法与数据结构(十)--图的入门

一.图的定义和分类 定义:图是由一组顶点和一组能够将两个顶点连接的边组成的。 特殊的图: 1.自环:即一条连接一个顶点和其自身的边; 2.平行边:连接同一对顶点的两条边; 图的分类: 按照连接两个顶点的边的…

带你速览主数据管理(MDM)的前世今生

主数据管理的历史可以追溯到很久以前,可以说主数据管理是生产生活的一部分。随着社会生产力和生产工具的不断发展,主数据和主数据管理在其中的作用不断提升,成为当今政府、企业和社会团队等组织管理中必不可少基础管理工作,同时也…

FrameBuffer 应用编程

目录 什么是FrameBufferLCD 的基础知识使用ioctl()获取屏幕参数信息使用mmap()将显示缓冲区映射到用户空间 LCD 应用编程练习之LCD 基本操作LCD 应用编程练习之显示BMP 图片BMP 图像介绍在LCD 上显示BMP 图像在开发板上测试 在LCD 上显示jpeg 图像在LCD 上显示png 图片LCD 横屏…

强化学习(2)

强化学习(1) 1.多智能体深度强化学习重要性采样 多智能体深度强化学习(Multi-Agent Deep Reinforcement Learning,MADRL)是指在多智能体环境下使用深度强化学习算法进行协同学习。重要性采样(Importance Sampling)是…

C语言_分支和循环语句(2)

文章目录 前言一、for 循环1.1语法1.2 for 语句的循环控制变量1.3 一些 for 循环的变种 二、do ... while()循环2.1 do 语句的语法2.2 do ... while 循环中的 break 和 continue2.3 练习1 **- 计算n的阶乘**2. - **在一个有序数组中查找具体的某个数字 n** 二分查找算法&#x…

68、使用aws官方的demo和配置aws服务,进行视频流上传播放

基本思想:参考官方视频,进行了配置aws,测试了视频推流,rtsp和mp4格式的视频貌似有问题,待调研和解决 第一步:1) 进入aws的网站,然后进入ioT Core 2)先配置 Thing types & Thing,选择香港的节点,然后AWS ioT--->Manage---> Thing type 然后输入名字,创建Th…

React钩子函数之forwardRef

React是一个非常流行的JavaScript库,用于构建用户界面。它提供了一种简单而强大的方式来管理组件的状态和行为。其中一个非常有用的功能是钩子函数,它们允许我们在组件的生命周期中执行代码。 在本文中,我们将探讨React的一个重要钩子函数—…

计算机视觉之图像特征提取

图像特征提取是计算机视觉中的重要任务,它有助于识别、分类、检测和跟踪对象。以下是一些常用的图像特征提取算法及其简介: 颜色直方图(Color Histogram): 简介:颜色直方图表示图像中各种颜色的分布情况。通…

screen命令,可以断开服务器连接,依旧能运行你的程序了

可以参考博客1:https://blog.csdn.net/nima_zhang_b/article/details/82797928 可以参考博客2:https://blog.csdn.net/herocheney/article/details/130984403 Linux中的screen是一个命令行工具,可以让用户在同一个终端会话中创建多个虚拟终端。它非常有…

CMake调用第三方库的两种方法

为了让连接器搜索到库路径,一般有两种方法 link_directories命令 使用步骤## 在add_executable或add_library前引入第三方库 # 1.引入第三方库,${THIRD_PARTY_PREFIX}为用户定义的第三方库目录 link_directories(${THIRD_PARTY_PREFIX}/lib) # 2.增加第三方库头文…

null值 字段运算

null值字段运算前先把null转成0 test表如下,num2为null select num1-num2 from test; 结果为null减去null值结果为null select sum(num1),SUM(num2) from test ;sum求和结果为null 判断字段是null不能用 null ,要用is null 错误写法: select IF(…

Spring AOP基于注解方式实现和细节

目录 一、Spring AOP底层技术 二、初步实现AOP编程 三、获取切点详细信息 四、 切点表达式语法 五、重用(提取)切点表达式 一、Spring AOP底层技术 SpringAop的核心在于动态代理,那么在SpringAop的底层的技术是依靠了什么技术呢&#x…

CSS按钮-跑马灯边框

思路很简单&#xff0c;实现方法有很多很多。但是大体思路与实现方法都类似&#xff1a;渐变色 动画&#xff0c;主要区别在动画的具体实现 0、HTML 结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><titl…

服务网格实施周期缩短 50%,丽迅物流基于阿里云 ACK 和 ASM 的云原生应用管理实践

作者&#xff1a;王夕宁、 刘强、 华相 公司介绍 丽迅物流是百丽旗下专注于时尚产业、为企业提供专业物流及供应链解决方案的服务商。其产品服务主要包括城市落地配、仓配一体、干线运输及定制化解决方案。通过自研智能化物流管理平台&#xff0c;全面助力企业合作集约化发展…

ChatGPT时代的我的博客

好久没有在CSDN写原创文章了。 ChatGPT出来之后&#xff0c;肯定对CSDN这样的平台有很大的冲击性。 我平时在CSDN写的文章&#xff0c;大多是翻译和一些平时编程遇到的代码问题。小部分是一些自己的经验和总结。 这些文章会被ChatGPT&#xff0c;或者更通用的说&#xff0c;…