uniapp使用VConsole调试工具

雪芽蓝域zzs

已于 2024-05-04 09:43:46 修改

阅读量1.1w

点赞数 4

CC 4.0 BY-SA版权

分类专栏： uniapp 文章标签： uni-app javascript vue.js

于 2023-03-08 21:59:09 首次发布

本文链接：https://blog.csdn.net/qq_36158551/article/details/129412523

uniapp 专栏收录该内容

37 篇文章

订阅专栏

文章介绍了如何在uniapp项目中安装和使用VConsole作为调试工具。通过npm安装vconsole后，可以在App.vue文件中局部或全局引用，解决在uniapp的H5环境下真机调试的问题。当直接在main.js引入导致页面空白时，可以尝试在单个页面引入以避免问题。VConsole引入后不仅限于单个页面调试，可在全局使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. uniapp使用VConsole调试工具

1.1. 安装

npm install vconsole

在这里插入图片描述

找到node_modules文件夹下vconsole的dist文件的vconsole.min.js，复制到需要调试的项目下；

在App.vue文件下引入vconsole.min.js
在这里插入图片描述

1.2. 引用

1.2.1. 局部引用

在App.vue文件下引入vconsole.min.js

<script>
	var VConsole = require('./common/vconsole.min.js');
	mounted() {
			var vConsole = new VConsole();
			console.log('开启调试');
		},
</script>

1.2.2. 全局引用

// 提交前需要注释本地调试使用

// const vconsole = require('./api/vconsole.min')
const vconsole = require('vconsole')
Vue.prototype.$vconsole = new vconsole() // 使用vconsole

1.3. npm命令

先执行命令 npm i vconsole
然后在文件中加入代码，就可以打印日志了

import  VConsole  from  'vconsole';
let vConsole = new VConsole();
console.log("test");

在这里插入图片描述

1.3. uniapp解决vconsole无法正常使用

uniapp开发的h5需要使用vconsole真机调试，如果直接在main.js引入，打包后整个项目会页面空白，经实验在单个页面引入可解决：

<script module="vconsole" lang="renderjs">  
   import VConsole from 'vconsole' // TODO
   new VConsole() // 使用vconsole
</script>

在这里插入图片描述

而且引入后vconsole在其他页面并不会消失，因此并不是只能调试单个页面，直接在入口页面引入即可全局使用。