vue3.0框架配置环境变量以及H5端的调试输出插件vConsle

该篇文章主要解决的问题就是在手机上h5的调试，分析bug。

首先因为是webview内嵌的h5，所以直接用微信开发者工具是无法抓包的。然后webview嵌套的是一个项目，所以这里使用了2个webview。webview里面的每个页面都是要打开一个浏览器才能查看相关接口。当然这里针对的是手机上出现问题的调试方式。因为如果不是手机，大可以使用谷歌浏览器的network以及console控制台来调试。

首先选择了插件vConsole，使用方式如下：

npm install vConsole
然后在main.js里面引用
import Vconsole from 'vconsole'
const vConsole1 = new Vconsole()
app.use(vConsole1)

这样呢，就引入了一个控制台在手机上面。可是这样会在任何一种环境都会有打印信息。所以，还需要一个环境变量来区分是否需要使用。代码如下：

在项目根目录下创建以下文件
.env.js
NODE_ENV = 'development' 
.env.production
NODE_ENV = 'production'


接下里就可以使用变量来区分了

import Vconsole from 'vconsole'
const app = createApp(App) // 创建实例
if (process.env.NODE_ENV != 'production') {
  const vConsole1 = new Vconsole()
  app.use(vConsole1)
}