如何使用Hubilder X將vue網頁前端專案轉成手機app
- 第一步：改一下vue專案中某個路徑
- 第二步：將原有vue專案打包生成dist檔案夾
- 第三步：新建一個5+ app專案并洗掉里面自帶的不必要檔案
- 第四步：配置
- 最后一步：打包
第一步：改一下vue專案中某個路徑
將vue專案中的，config檔案夾下index.js檔案中的build屬性下的assetsPublicPath: '/'改成：assetsPublicPath: ‘./’
第二步：將原有vue專案打包生成dist檔案夾
將vue專案進行打包，打包完成后會自動生成一個dist檔案夾，我們需要的就是這個dist檔案夾（后續將此檔案夾復制到另外個專案即可）
打包方法：如圖
打包完成后：dist檔案夾如圖
第三步：新建一個5+ app專案并洗掉里面自帶的不必要檔案
在huilder x中創建5+ app專案，創建完成后可將專案中的“img檔案”、“js檔案”以及“css”檔案洗掉
創建完成后：
將第一步打包生成的dist檔案下面的檔案復制到剛剛創建的專案中：
第四步：配置
打開創建專案中的manifest.json檔案即可進入配置頁面
配置的話，不需要改很多，可以把圖示配置改一下，也就是生成app的桌面圖示（可以使用自動生成圖示，上傳個圖片，后面的圖示全部自動上去了，很方便）
如果在后續打包app程序中提示權限問題（比如通訊錄權限，需要實名認證才可使用的，如果不需要使用，可以會到權限配置將那個權限取消掉，再繼續打包）
最后一步：打包
將上述步驟完成后就可以進行打包了：單機發行，然后選擇：原生app-云打包 即可
生成檔案后，在控制臺會顯示路徑，發到手機上就可以真機測驗啦，很方便
第一次寫博客，哈哈哈哈，記錄一下
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/282589.html
標籤：其他