Vue項(xiàng)目打包成移動(dòng)端APP

需要準(zhǔn)備的工具：Hbuilder

首先打包vue到dist目錄

npm run build

然后再Hbuilder中打開dist目錄

首先可以看到dist目錄的圖片是一個(gè) W 字樣的圖標(biāo)，表示這是一個(gè) web項(xiàng)目

然后將dist包含的 web項(xiàng)目 轉(zhuǎn)換為 移動(dòng) APP項(xiàng)目

 此時(shí)可以看到dist目錄的文件圖標(biāo)由 W 變成了 A，說(shuō)明此時(shí)的web項(xiàng)目已經(jīng)變成了移動(dòng)APP項(xiàng)目 ，而且此時(shí)生成了一個(gè)新的文件manifest.json

下面要做的就是在manifest.json中配置移動(dòng)APP所需要的配置項(xiàng)

應(yīng)用信息配置

appid需要登錄后才能獲取

圖標(biāo)配置

啟動(dòng)圖片

SDK配置

模塊權(quán)限配置

頁(yè)面引用關(guān)系

頁(yè)面引用關(guān)系分析并不是完全正確的，對(duì)于未被檢測(cè)到文件需要手動(dòng)添加到打包項(xiàng)目中去

代碼視圖

此視圖中會(huì)顯示所有的配置信息

前幾步配置完成后，就可以在手機(jī)上進(jìn)行真機(jī)調(diào)試了

首先使用usb數(shù)據(jù)線連接自己的手機(jī)，然后將手機(jī)設(shè)置為開發(fā)者模式中的USB調(diào)試模式

接下來(lái)就是啟動(dòng)Hbuilder真機(jī)調(diào)試了

連接后，會(huì)在手機(jī)上自動(dòng)安裝一個(gè)HbuilderAPP，用于真機(jī)調(diào)試

真機(jī)測(cè)試沒(méi)有問(wèn)題，就可以進(jìn)行下一步---》打包apk了

菜單欄點(diǎn)擊【發(fā)行】【云打包-打原生安裝包】

最后將apk安裝包安裝到手機(jī)上就可以正常使用了

Vue打包成.apk安裝的過(guò)程中遇到的問(wèn)題

問(wèn)題1：打包成的apk在真機(jī)上顯示空白界面

原因：項(xiàng)目文件路徑引用錯(cuò)誤，導(dǎo)致文件加載為404

vue打包后的文件時(shí)存在于dist目錄下的，也就是說(shuō)dist目錄作為根目錄。

在dist目錄中啟動(dòng)一個(gè)本地服務(wù)其訪問(wèn)地址為http://localhost:8080/index.html,即可訪問(wèn)首頁(yè)dist目錄下的index.html文件并加載對(duì)應(yīng)的js,css文件，也就是說(shuō)文件啟動(dòng)根目錄是和dist目錄中的index.html是平級(jí)的。

- dist
-- css
-- img
-- js
-- index.html
-- 啟動(dòng)的根目錄

而打包成apk文件后在真機(jī)上測(cè)試，其訪問(wèn)的地址為http://localhost:8080/dist/index.html，多了一層dist，導(dǎo)致頁(yè)面空白，加載的文件為404找不到,也就是說(shuō)打包后的啟動(dòng)目錄的根目錄是個(gè)dist平級(jí)的不是和dist目錄中的index.html平級(jí)。

- dist
-- css
-- img
-- js
-- index.html
- 啟動(dòng)的根目錄

 解決方法：

在vue打包成dist文件前，修改vue.config.js配置文件，將打包文件的資源文件更改為當(dāng)前目錄下的絕對(duì)路徑

mudule.exports = {
    // publicPath: '/',
    publicPath: './'
}

問(wèn)題2：首屏展示后，路由無(wú)法跳轉(zhuǎn)，點(diǎn)擊無(wú)效

原因：文件動(dòng)態(tài)加載的資源地址404找不到

因?yàn)閯?dòng)態(tài)加載的資源地址為http://localhost:8080/css/xxx.css和http://localhost:8080/js/xxx.js，而實(shí)際上文件的資源路徑是http://localhost:8080/dist/css/xxx.css和http://localhost:8080/dist/js/xxx.js說(shuō)加載動(dòng)態(tài)加載的資源均為404

解決方法：

更改vue項(xiàng)目中的路由模型配置：將H5的歷史記錄模式改為hash模式

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
    // mode: 'history',
    mode: 'hash'
})
export default router

到此這篇關(guān)于Vue項(xiàng)目打包成移動(dòng)端APP的文章就介紹到這了,更多相關(guān)vue打包成app內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論