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

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

作者: ForeverYoung_06 | 来源:发表于2020-09-01 15:14 被阅读0次

    市场上手机大小各式各样,事实上目前还没有完美适配移动端的方案,常用的有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/

    相关文章

      网友评论

          本文标题:vue项目开发移动端真机测试/手机端网页预览

          本文链接:https://www.haomeiwen.com/subject/lhsvsktx.html