【VUE】移动端开发小技巧

Vue移动端项目如何使用手机预览调试

最近在用Vue3写app，简单研究了下怎么在手机上实时预览效果，记录一下

电脑和手机连接同一个WIFI

点击查看内容

以下方法二选一均可：

电脑与手机连接同一个路由器，使用同一个wifi
手机开热点，电脑连上手机热点

查询本地IP地址

点击查看内容

打开cmd/命令提示符，输入ipconfig回车，查看本地IPv4
CMD

修改vue项目的IP地址

点击查看内容

这里用Vue3示例，Vue2也是同理

找到项目中的config.js文件
在export default中添加下图框选的代码，IP地址改为上面提到的本地IPv4地址，端口改成自己喜欢的
在终端重启项目npm run dev

config

关闭电脑防火墙

点击查看内容

应该有更好更安全的办法，但我没找到

打开电脑防火墙设置，关闭WIFI正在使用的网络防火墙
搜索防火墙
防火墙打开
防火墙关闭

手机访问IP地址

点击查看内容

在手机浏览器中输入刚设置的IP地址及端口，就可以在手机里实时预览Vue项目了
防火墙关闭

- 2023.11.23更新 -

在不打包的前提下预览调试移动端安全边距

安全边距问题一直是app开发的一个重点，用网页打包app的朋友应该有注意过，使用css自带的env( )安全边距代码，打包出来是没效果的；
因此，由于我们的app是通过网页打包出来，再用flutter套壳弄成的，所以直接用了flutter解决这个问题；
但安全边距的关键代码都是在flutter里的，在开发时是测不到的，只有打包出来才能看到效果，这样的开发效率是非常低的。
我们的解决办法是开发时用css的安全边距替代，打包时仍用flutter传回的参数替代，目前这样做得到的效果是很不错的。
但即便如此，要想实时预览css安全边距的效果，也是需要一点技巧的。

移动端调试最好的方法莫过于直接调取手机页面的后台，这里是用了Chrome开发者工具(DevTools)的跨平台联动