vue项目 手机调试配置

vue开发手机版项目过程中，需要手机调试，网上给的方法有很多，

我的设备是win10电脑 + 安卓手机，

常用两种手机调试本地项目方法：chrome和微信开发者工具。

一、vue-cli2项目中更改配置

将config/index.js中的host改为你的局域网地址

（局域网地址：在cmd中输入ipconfig，回车返回的 IPv4 地址就是局域网地址）

 

 

以下是两种手机调试本地项目方法：

一、PC chrome + 数据线 +  Android chrome

1.电脑、手机分别下载chrome浏览器；

2.电脑和手机用数据线连接，手机打开wifi（和电脑连接同一局域网），手机usb连接方式选MTP(设备文件管理），打开开发者选项和usb调试，并打开chrome浏览器

  

3.pc端的chrome浏览器中打开 chrome://inspect 

4.连接成功会显示设备手机名称、手机打开的网站

二、微信开发者工具 + wifi 

1.pc下载 微信web开发者工具，打开移动调试，点击普通调试，点击开始调试

2.手机连上与电脑同一局域网的wifi ，在wifi设置中长按该wifi，点击修改网络。。。，按微信开发工具步骤3提示设置主机名和端口号，保存，就可以在手机各种浏览器查看页面啦！！（浏览器中输入你电脑访问得到的网址。例如我前面在vue中设置了192.168.0.23，端口号8080，我就在手机浏览器输入http://192.168.0.23:8080）