vue开发的手机网页如何在手机测试查看

用vue.js框架开发了移动端网站,可是我们知道手机浏览器和电脑上的浏览器其实有很大的差异,特别是ios的浏览器,所以我们在做项目的过程中需要不断地用手机去测试网站查看网站才能在做的过程中减少很多不必要的麻烦。那怎么在手机上查看网站呢?试了网上说的方法,自己试了一下,竟然发现不行,然后通过尝试,终于可以了。

一、修改IP地址

在vue的根项目文件下,有个config配置文件目录,里面有个【index.js】文件,在(vue开发环境的搭建安装操作手册——七步搞定)这一篇说过,要把端口改一下,现在改的是host路径,怎么改呢?很简单,打开【命令提示符】,输入【ipconfig】,就能查看到本地的ip地址,然后把地址替换原来项目的【localhost】。这里有个前提,就是你手机连上的wifi和你的电脑是使用同一个网络的。

设置ip地址

二、手机测试

在手机浏览器中输入【192.168.0.x:8083】ip地址加上端口,就可以打开了。直接输入地址是一种方法,还有一种方法就是把该地址复制到连接装换成二维码的那些网站转成二维码,只要打开你的微信扫一扫,就可以查看测试了,是不是很简单呢。

手机测试

以上是我在开发vue手机网页的过程中遇到的问题。应该注意的是,并不是改了项目localhost地址就可以了,还要再在npm上重新运行一下,如何调出npm?方法就是回到该项目的根目录,然后按住【shift】+右键,输入命令行【cnpm run dev】重新运行一下。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?