vconsole的npm的用法

为了H5开发和测试的时候，方便手机端查看日志，我们可以借助工具“vconsole”。

可以参考：GitHub - Tencent/vConsole: A lightweight, extendable front-end developer tool for mobile web page.

1、CDN的方式（有一个缺点就是，CDN对应的在线包有时候获取不到）：

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole will be exported to `window.VConsole` by default.
  var vConsole = new window.VConsole();
</script>

当上面的CDN使用有问题的时候，可以用下面的CDN替换：

• https://unpkg.com/vconsole@latest/dist/vconsole.min.js
• https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

2、使用npm的方式安装：

npm install vconsole —D

 在main.js中编写下面的代码：

import VConsole from 'vconsole';

//vue2的写法
if (process.env.NODE_ENV == "development") {//如果是dev环境，就实例vConsole
  new VConsole({ theme: "dark" });
}

//vue3的写法：
if (import.meta.env.DEV) { //如果是dev环境，就实例vConsole
  new VConsole({ theme: "dark" });
}