vue项目利用Hbuilder打包成APP流程，以及遇到的坑

目录

1.打包项目

1.1打包的app出现白屏。

 1.2点击页面跳转不了，报 Loading chunk 2 failed. 等错误。

1.3.点手机物理按钮，直接退出程序。

2.Hbuilder发布

 2.1创建项目5+App项目

2.2 替换文件

2.3利用云打包发布APP

1.打包项目

期间遇到的坑，提前说下，避免重复工作。

1.1打包的app出现白屏。

出现原因：路径不对，需要改config\index.js

解决办法：修改打包的路径。

 1.2点击页面跳转不了，报 Loading chunk 2 failed. 等错误。

出现原因：不能用history配置路由，要用hash

解决办法：修改路由mode属性为hash。

1.3.点手机物理按钮，直接退出程序。

出现原因：无理返回键直接用监听不到路由，会直接退出程序。

解决办法：可以引入mui，就能正常使用了。

1.在webpack.base.conf.js里面引入mui。（图一）

2.下载mui相关文件，在main.js里面引入。（若需要使用mui其他方法，请自行查阅资料）（图二）

3.这个时候，引入mui可能会报错，我们需要修改一些文件。（图三）

 

（图一）

（图二）

（图二） 

（图三）

 

2.Hbuilder发布

 2.1创建项目5+App项目

2.2 替换文件

先删除默认的css、img、js、index.html等无用默认文件。再将打包好的dist文件夹下的static和index.html文件，放至新建的项目下。

相关app的配置可自行在manifest.json中修改，这里不做详细说明。

2.3利用云打包发布APP

如有证书，就填写证书等信息，若没有可临时用Dcloud公用证书。

填完信息，点击打包即可，之后就等待打包生成app的下载链接，进行下载安装啦。

个人记录~