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/

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。