vue項目利用Hbuider打包成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。(圖1)

2.下載mui相關文件,在main.js裏引入。(若要使用mui其他方法,請自行查資料)(圖2)

3.這個時候,引入mui可能會報錯,我們需要修改一些文件。(圖3)

在這裏插入圖片描述

(圖1)

在這裏插入圖片描述
(圖2)

在這裏插入圖片描述
(圖2)

在這裏插入圖片描述
在這裏插入圖片描述
(圖3)

2.Hbuilder發佈

2.1創建項目5+App項目

在這裏插入圖片描述

替換文件

先刪除默認的css、img、js、index.html等無用默認文件。在將打包好的dist文件夾下的static和index.html文件,放至新建的項目下。

相關app的配置可自行在manifest.json中修改。
在這裏插入圖片描述

2.3利用雲打包發佈APP

如有證書,就填寫證書等信息,若沒有課臨時用Dcloud公用證書。

填完信息,點擊打包即可,之後就等待打包生成APP的下載鏈接,進行安裝。
在這裏插入圖片描述
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章