vue-cli或vue項目利用HBuilder打包成移動端app

一、測試項目是否可以正確運行 指令:npm run dev
1、首先我們先建立一個vue的項目,本人用的是vue-cli隨便建立的,然後運行項目
二、修改路徑 (assetsPublicPath: ‘./’)
1、 打開我們config中的js文件,修改assetsPublicPath的路徑爲"./"(下圖的右下角位置)
2、 檢查下assetsRoot: path.resolve(__dirname, ‘…/dist’),
assetsSubDirectory: ‘static’,
assetsPublicPath: ‘./’, (一般情況下是這樣的)

三、打包文件 指令:npm run build
1、打包後會生成dist文件
四、創建新目錄(MyApp)
1、 在HBuilder中點擊文件,打開目錄,找到我們項目中的打包好的文件下找到dist文件,再命名,然後確 定。然後我們會看到這樣的帶着 W 的文件
五、轉換APP
1、點擊該項目右鍵屬性,點擊轉換成App(T)
六、關於manifest.json配置
1、應用信息
在這裏插入圖片描述
2、manifest.json裏面配置APP名字及APP圖標
app圖標:現在下面點擊圖標配置,然後選擇圖片放上去(圖片只能爲PNG格式,通過手動改後綴是不可以的)
3、啓動圖片(splash)配置,sdk配置等有需要就配置沒有就默認
七、調試和打包生成apk
1、先安裝個第三方工具(360助手之類的,方便連接模擬調試)
2、調試
(運行–真機運行–選擇第一個HBuilder基座運行-把HBuilder調查WebView模式,調試時點擊右邊)在這裏插入圖片描述
3、調試完後,進行發行
(1)點擊發行,發行爲原生安裝包
(2)點擊使用DCloud公用證書,點擊打包
(3)等待制作,下載
4、安裝
(1)可直接通過360助手來安裝,或者用qq或其他發送到手機上安裝,如不能直接安裝,就到手機上文件管理找到文件點擊安裝即可

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