首页 > 其他分享 >Vue3+TS+Vite中 vConsole 插件的使用

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

时间:2023-12-26 19:45:38浏览次数:41  
标签:插件 vconsole TS vConsole production VITE Vue3 import Vconsole

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

vConsole 是框架无关的,可以在 Vue、React 或其他任何框架中使用。

现在 vConsole 是微信小程序的官方调试工具。

https://gitee.com/Tencent/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.环境变量 获取不到,如下图:

 

标签:插件,vconsole,TS,vConsole,production,VITE,Vue3,import,Vconsole
From: https://www.cnblogs.com/miangao/p/17929175.html

相关文章

  • 洛谷B3611 【模板】传递闭包 floyd/bitset
    目录floydbitset优化题目链接:https://www.luogu.com.cn/problem/B3611参考题解:https://www.luogu.com.cn/blog/53022/solution-b3611floyd#include<bits/stdc++.h>usingnamespacestd;constintmaxn=101;intn,f[maxn][maxn];intmain(){scanf("%d"......
  • ArgoCD和Argo Rollouts自动化部署应用
    环境说明使用ArgoRollouts部署nginx应用:1.使用Rollout部署nginx2.采用canary部署策略3.结合Analysis进行渐进式交付4.结合IstioVirtualService进行自动化流量分割和流量迁移5.部署清单放在gitrepo中使用ArgoCD进行自动化部署:1.使用Application监视GitRepository2......
  • Argo Rollouts TrafficRouting结合Istio进行Canary流量管理基础
    ArgoRolloutsTrafficRouting概述流量治理技术实现如下:1.按百分比进行流量管理(即5%的流量应流向新版本,其余流量流向稳定版本)2.基于标头的路由(即将带有特定标头的请求发送到新版本)3.镜像流量,其中所有流量都被复制并并行发送到新版本(但响应被忽略)TrafficRouting配置apiVersi......
  • Argo Rollouts notifications
    ArgoRolloutsnotificationscm模板argo-rollouts-notification-configmap的configmap需要部署在argo-rollouts名称空间下。apiVersion:v1kind:ConfigMapmetadata:name:argo-rollouts-notification-configmapdata:template.analysis-run-error:|message:Rollo......
  • Argo Rollouts Canary结合Istio进行流量迁移实例
    环境说明用argorollouts金丝雀发布策略更新nginx服务。发布过程结合Isito和analysis。创建nsargo-demo#kubectlcreatensargo-demonamespace/argo-democreated启用Istio自动注入功能#kubectllabelnamespaceargo-demoistio-injection=enablednamespace/argo-demolabe......
  • Argo Rollouts AnalysisTemplate CRD
    AnalysisTemplateCRDapiVersion:argoproj.io/v1alpha1kind:AnalysisTemplatemetadata:name:success-ratespec:args:#模板参数,模板内部引用的格式为“{{args.NAME}}”;可在调用该模板时对其赋值;-name:<string>value:<string>valueF......
  • ArgoCD和Argo Rollouts自动化部署应用
    环境说明使用ArgoRollouts部署nginx应用:1.使用Rollout部署nginx2.采用canary部署策略3.结合Analysis进行渐进式交付4.结合IstioVirtualService进行自动化流量分割和流量迁移5.部署清单放在gitrepo中使用ArgoCD进行自动化部署:1.使用Application监视GitRepository2......
  • 汉字在unicode的编码情况-From http://yedict.com/zsts.htm
    字符集内容字数unicode编码字符显示说明(除非安装更大字库)基本区 分页:  一 二 三 四共20902字4E00-9FA5电脑和手机都能显示基本区补充共90字9FA6-9FFF电脑或安卓5以上的手机能显示一部分扩展A共6582字3400-4DB5电脑和手机都能显示扩展A补充共10......
  • vue3 elementplus 表格表头过长 三个点显示
    vue3:constrenderHeaderMethods=({column})=>{returncreateVNode(resolveComponent('el-tooltip'),{effect:'dark',content:column.label,placement:'top'......
  • 【已解决】WordPress安装插件提示:需要访问您网页服务器的权限
    前一段时间把workpress做了迁移后,发现安装插件的时候会给出如下提示: 经过百度查询找到解决方法,修改 /var/www/html/wp-config.php文件,增加字段:define('FS_METHOD','direct');如下图 之后重启服务:systemctlrestarthttpd,即可正常安装插件了,如下 ......