动态加载vconsole

需求：移动端开发调试H5页面比较麻烦，以往Android可以通过chrome联调，即chrome://inspect能加载到手机端页面，但是本人试过成功率不高，有时候往往某个型号手机就调不出来，很捉鸡~~~并且IOS就用不了这个功能；

IOS可以安装Stream进行抓包，这个还是比较好用的，但是Android没有这个app，而且毕竟需要在抓包app和调试页面间来回切换，有一点麻烦；

vconsole的话不用区分手机环境，提供了类似pc端的调试环境很方便。

使用上一般有以下几种方式

方式一、通过script在主文件中引入

如图一，在index.html文件中引入,放在标签中；

之前引入wechatfe这个是可以的，今天就不行了网页打开404，最后试了cdn这个ok，目前最新版本是3.5.0。

这个方法的问题是永久注入vconsole，发版前还得手动注释掉，很容易遗漏发版到网上，反正就是不太友好。

图一

方式二、引入webpack插件，配置为当处于生产环境时不注入vconsole；

首先 npm i vconsole-webpack-plugin

如图二、三，在webpack.config.js中引入，判断当前环境，当非生产环境时，envType为true，在开发、测试环境都将能成功注入vconsole，解决了方法一的人工注释可能带来的问题。此时也有个问题，就是开发测试环境毕然会有vconsole出现，其实有时候并不需要，页面看着多余，尤其在测试环境，希望debug的时候有，其余时间没有，否则测试并不能同意这多出来的东西在生产环境一定能去掉。

图二

图三

方法三、通过url上的变量控制；

首先，npm i vconsole；

其次在公共js文件中import vconsole，如图四本地分装的获取url参数的方法getUrlParam，因此无论什么环境在需要的情况下只要在url上加?isVconsole='true' 页面上就会显示出来，很方便。

图四

图五