vue项目开发移动端真机测试/手机端网页预览

市场上手机大小各式各样，事实上目前还没有完美适配移动端的方案，常用的有vw，rem，百分比等。
前端在PC端开发移动端项目时，通过F12看到的还是和真机有区别，因此我们需要真机测试。
首先，真机测试的必要条件：

1、手机与电脑在同一个局域网内，比如手机和电脑连接同一个WIFI。

2、需要知道开发电脑的IP地址。

步骤：

1、查看电脑IP地址

找到电脑的window键和R键，同时按下，弹出窗口

image.png

点击确定，输入ipconfig

image.png

IPv4地址即为此电脑IP

image.png

2、修改项目配置

找到项目中config文件夹下的index.js，找到host值把 'localhost' 修改为此电脑的IP地址

image.png

3、重启项目

接下来，你可以选择把项目地址，例如：192.168.1.111：8080输入到手机浏览器，打开即可看到页面，并且和电脑端同步，修改代码，手机端页面也更新。（注意：手机电脑连接同一个WIFI）
或者，你可以选择在草料二维码网站生成二维码，扫码也可看到。
草料二维码网站：https://cli.im/