vue项目利用Hbuider打包成APP教程,及遇到的坑

1.打包项目

期间遇到的坑

1.1打包的app出现白屏

出现原因:路径不对,需要改config\index.js
解决方法:修改打包的路径。
vue项目利用Hbuider打包成APP教程,及遇到的坑

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

出现原因:不能用history配置路由,要用hash
解决办法:修改路由mode属性为hash。
vue项目利用Hbuider打包成APP教程,及遇到的坑

1.3.手机按钮,直接退出程序。

出现原因:无理返回键直接用监听不到路由,会直接退出程序。
解决方法:可以引入mui,就可以正常使用了。

1.在webpack.base.conf.js里引入mui。(图1)

2.下载mui相关文件,在main.js里引入。(若要使用mui其他方法,请自行查资料)(图2)

3.这个时候,引入mui可能会报错,我们需要修改一些文件。(图3)

vue项目利用Hbuider打包成APP教程,及遇到的坑

(图1)

vue项目利用Hbuider打包成APP教程,及遇到的坑
(图2)

vue项目利用Hbuider打包成APP教程,及遇到的坑
(图2)

vue项目利用Hbuider打包成APP教程,及遇到的坑
vue项目利用Hbuider打包成APP教程,及遇到的坑
(图3)

2.Hbuilder发布

2.1创建项目5+App项目

vue项目利用Hbuider打包成APP教程,及遇到的坑

替换文件

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

相关app的配置可自行在manifest.json中修改。
vue项目利用Hbuider打包成APP教程,及遇到的坑

2.3利用云打包发布APP

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

填完信息,点击打包即可,之后就等待打包生成APP的下载链接,进行安装。
vue项目利用Hbuider打包成APP教程,及遇到的坑
vue项目利用Hbuider打包成APP教程,及遇到的坑

上一篇:MUI-numbox(数字输入框),最小值、最大值、步长、获取值、设置值、重定义


下一篇:android开发android:taskAffinity标签属性的理解