腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

淺談vue項(xiàng)目利用Hbuilder打包成APP流程,以及遇到的坑

更新時(shí)間：2020年09月12日 09:29:03 作者：wly_er

這篇文章主要介紹了淺談vue項(xiàng)目利用Hbuilder打包成APP流程,以及遇到的坑，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧

1.打包項(xiàng)目

期間遇到的坑，提前說下，避免重復(fù)工作。

1.1打包的app出現(xiàn)白屏。

出現(xiàn)原因：路徑不對(duì)，需要改config\index.js

解決辦法：修改打包的路徑。

1.2點(diǎn)擊頁面跳轉(zhuǎn)不了，報(bào) Loading chunk 2 failed. 等錯(cuò)誤。

出現(xiàn)原因：不能用history配置路由，要用hash

解決辦法：修改路由mode屬性為hash。

1.3.點(diǎn)手機(jī)物理按鈕，直接退出程序。

出現(xiàn)原因：無理返回鍵直接用監(jiān)聽不到路由，會(huì)直接退出程序。

解決辦法：可以引入mui，就能正常使用了。

1.在webpack.base.conf.js里面引入mui。（圖一）

2.下載mui相關(guān)文件，在main.js里面引入。（若需要使用mui其他方法，請(qǐng)自行查閱資料）（圖二）

3.這個(gè)時(shí)候，引入mui可能會(huì)報(bào)錯(cuò)，我們需要修改一些文件。（圖三）

（圖一）

（圖二）

（圖三）

2.Hbuilder發(fā)布

2.1創(chuàng)建項(xiàng)目5+App項(xiàng)目

2.2 替換文件

先刪除默認(rèn)的css、img、js、index.html等無用默認(rèn)文件。再將打包好的dist文件夾下的static和index.html文件，放至新建的項(xiàng)目下。

相關(guān)app的配置可自行在manifest.json中修改，這里不做詳細(xì)說明。

2.3利用云打包發(fā)布APP

如有證書，就填寫證書等信息，若沒有可臨時(shí)用Dcloud公用證書。

填完信息，點(diǎn)擊打包即可，之后就等待打包生成app的下載鏈接，進(jìn)行下載安裝啦。

個(gè)人記錄~

補(bǔ)充知識(shí)：記錄 vue項(xiàng)目打包放入 hbuilder 做app真機(jī)測(cè)試時(shí) 無法請(qǐng)求后臺(tái)服務(wù)接口

1.因?yàn)榘l(fā)布app時(shí) vue開發(fā)模式下配置的跨域是無效的，打包后會(huì)找不到接口

例如下面是之前的錯(cuò)誤版：

'/propertyCmsAPI': {
    target: 'http://192.168.1.111:9001/',
    changeOrigin: true,
    pathRewrite: {
     '^/propertyCmsAPI':''
    }
   },

在使用時(shí)：

export const logout = params =>{return axios.post(`/propertyCmsAPI/notIntercept/logout`,params)};

這種方法在網(wǎng)頁端打包是沒有問題的，只需要在nginx 里配置下跨域就可以訪問。

但是在做app時(shí)這樣是訪問不到數(shù)據(jù)的，因?yàn)椴淮嬖诳缬虻恼f法，打包成app后實(shí)際訪問的路徑就是 /propertyCmsAPI/notIntercept/logout ，這樣會(huì)找不到接口，要采用絕對(duì)路徑的方式，

例如：http://192.168.1.111:9001/notIntercept/logout，這樣才能訪問，不管你怎樣配置管理你的請(qǐng)求api，這個(gè)是必須得，

下面是我更改后的做法正確版，完全適用：

let propertyCmsAPI = "http://112.74.126.167:9001";//打包APP時(shí)使用

// let propertyCmsAPI = "propertyCmsAPI";

分為開發(fā)模式和打包模式，然后統(tǒng)一管理所有請(qǐng)求api：

其他應(yīng)該還有更好的方法，懶得研究了，目的已達(dá)到，效果已實(shí)現(xiàn)即可。

這一切弄好了之后就是打包，然后放入Hbuilder 編輯器進(jìn)行聯(lián)機(jī)測(cè)試，

2.聯(lián)機(jī)測(cè)試：

安卓機(jī)，真香

1.只需要把你的手機(jī)通過USB連接電腦，2.打開手機(jī)的開發(fā)者模式，3.選擇USB可以傳輸文件，4.打開USB調(diào)式模式，5.確認(rèn)電腦可以訪問該手機(jī)。

只要在hbuilder 運(yùn)行里找到你的手機(jī)點(diǎn)擊運(yùn)行就可以，會(huì)在手機(jī)安裝測(cè)試app，接下來就可以測(cè)試了，很給力

蘋果機(jī)，真臭

手機(jī)電腦連接蘋果手機(jī)要什么鬼itues ，老子光是安裝這個(gè)玩意都整了一個(gè)小時(shí)才讓電腦連上手機(jī)，這個(gè)先不提

在hbuilder運(yùn)行里找到iPhone點(diǎn)擊運(yùn)行后，會(huì)安裝測(cè)試app，然后你要在設(shè)置-通用里管理這個(gè)app，要選擇信任才行，否則你是打不開你的測(cè)試app的

打開app后最最操蛋的事情是他丫的居然訪問不了接口，控制臺(tái)打印攔截器的請(qǐng)求信息，響應(yīng)信息，發(fā)現(xiàn)點(diǎn)擊請(qǐng)求后直接就進(jìn)入catch了，根本不執(zhí)行請(qǐng)求，錯(cuò)誤提示就一個(gè)newwork error ，就這一個(gè)問題，整了一下午

各種搜索，百度，包括hbuilder官網(wǎng)給出的解決問題的方法，在原vue項(xiàng)目中又是引入qs ，又是引入es6-primse，然并卵

最后的最后在項(xiàng)目的manife.json配置中添加了一個(gè)配置：在plus的下面