HBuilderX在模拟器中实时预览Vuecli开发的APP

使用HBuilderX开发vue app的时候,在浏览器中不能使用HTML5+的功能,需要在模拟器或者手机上能够达到像在浏览器中的实时预览功能,不能改一个地方npm run build一次,这样就太麻烦了,于是试了试网络地址的方法,完美运行,终于可以愉快的装B了~

步骤

1、vue config中的host改为’0.0.0.0’,启动vuecli项目

2、manifest.json 中 launch_path 填写本机IP加程序端口,例如:http://192.168.1.113:8080/

3、电脑关掉防火墙

4、确认电脑连接到手机之后,在模拟器或者真机上运行就 OJBK 啦~!

这样在编辑器中修改vue的代码,就可以在真机或者模拟器上进行实时预览了。

注意

1、查看本机IP:运行cmd – ipconfig

2、这里不能用 localhost 和 127.0.0.1,否则启动程序的时候会找不到资源

3、安卓模拟器配置查看之前的一篇文章 HBuilderX调试夜神安卓模拟器

4、最终vue打包上线的时候,launch_path 需要改成项目打包之后的路径,vuecli打包之后默认路径是 dist/index.html,这里将 manifest.json 中的 launch_path 改成 dist/index.html 即可

呵呵!!!可算是可以直接在开发的时候直接调HTML5+的功能了~

猜你喜欢

发表评论

最新发布