h5移动端开发中配置真机测试

前言

在前端开发过程中，时常遇到移动端需求。若是每次部署完成后再查看开发效果，可能过于费时费力，因而需要可直接完成真机测试的配置

方法一：无需部署，直接同步本地调试

一：查询电脑本地IP地址

1：ctrl/window+r输入cmd回车，打开命令提示符;
2：输入ipconfig,查看本地ip，具体如下

二：修改config

修改config中的配置，将host改为本地ip，具体如下：

三：手机访问链接

1：将手机与电脑连接同一无线
2：重启项目，生成链接，具体如下图：
3：至此即可完成所有配置，手机端访问network即可

其他方式

借用抓包工具：spy-debugger

方法二：借用vconsole打开控制台

有时候，需要在移动端打开控制台查看打印数据或者接口请求等；

一：下载插件vconsole

npm install vconsole 

二：配置

import VConsole from 'vconsole'; 
const vConsole = new VConsole({ // 配置选项 
    defaultPlugins: ['system', 'network', 'element'], 
    // 默认开启的插件 
    onReady() { 
        console.log('vConsole is ready!'); 
    }, 
});