Hbuilder真机运行显示空白的问题

在用Hbuilder开发vue app的时候想用真机运行测试一下项目,便于做出调整,

1.在电脑上下载驱动,因为我的手机是华为所以我下载了华为手机助手

2.在手机上打开设置=>系统=>关于手机=>连点7-8次版本号,打开开发者人员选项,选择usb调试

3.链接手机和电脑

4. 打开Hbuilder 编辑器选择app项目按照下图操作

5.在运行真机调试的时候就出现了问题,这是手机上是一片空白,.vue页面加载不出来,在编辑器上也报出如图提示

6.经过一番查资料用不同的设备测试发现,手机上其实是有加载index.html页面的,只是.vue页面没有加载进来

7.真机运行只加载html文件,那么我们就只能执行npm run build 命令获得dist文件夹,这是我们就用这个文件夹真机运行,结果真的可以成功,只是这样每一次修改都要执行一下npm run build命令有些麻烦