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。（圖一）

2.下載mui相關檔案，在main.js裡面引入。（若需要使用mui其他方法，請自行查閱資料）（圖二）

3.這個時候，引入mui可能會報錯，我們需要修改一些檔案。（圖三）

（圖一）

（圖二）

（圖二）

（圖三）

2.Hbuilder釋出

2.1建立專案5+App專案

2.2 替換檔案

先刪除預設的css、img、js、index.html等無用預設檔案。再將打包好的dist資料夾下的static和index.html檔案，放至新建的專案下。

相關app的配置可自行在manifest.json中修改，這裡不做詳細說明。

2.3利用雲打包釋出APP

如有證書，就填寫證書等資訊，若沒有可臨時用Dcloud公用證書。

填完資訊，點選打包即可，之後就等待打包生成app的下載連結，進行下載安裝啦。

個人記錄~

補充知識：記錄 vue專案打包放入 hbuilder 做app真機測試時 無法請求後臺服務介面

1.因為釋出app時 vue開發模式下配置的跨域是無效的，打包後會找不到介面

例如下面是之前的錯誤版：

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

在使用時：

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

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

但是在做app時這樣是訪問不到資料的，因為不存在跨域的說法，打包成app後實際訪問的路徑就是 /propertyCmsAPI/notIntercept/logout ，這樣會找不到介面，要採用絕對路徑的方式，

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

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

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

// let propertyCmsAPI = "propertyCmsAPI";

分為開發模式和打包模式，然後統一管理所有請求api：

其他應該還有更好的方法，懶得研究了，目的已達到，效果已實現即可。

這一切弄好了之後就是打包，然後放入Hbuilder 編輯器進行聯機測試，

2.聯機測試：

安卓機，真香

1.只需要把你的手機通過USB連線電腦，2.開啟手機的開發者模式，3.選擇USB可以傳輸檔案，4.開啟USB調式模式，5.確認電腦可以訪問該手機。

只要在hbuilder 執行裡 找到你的手機點選執行就可以，會在手機安裝測試app，接下來就可以測試了，很給力

蘋果機，真臭

手機電腦連線蘋果手機要什麼鬼itues ，老子光是安裝這個玩意都整了一個小時才讓電腦連上手機，這個先不提

在hbuilder執行裡找到iPhone點選執行後，會安裝測試app，然後你要在 設定-通用裡管理這個app，要選擇信任才行，否則你是打不開你的測試app的

開啟app後最最操蛋的事情是他丫的居然訪問不了介面，控制檯列印攔截器的請求資訊，響應資訊，發現點選請求後直接就進入catch了，根本不執行請求，錯誤提示就一個newwork error ，就這一個問題，整了一下午

各種搜尋，百度，包括hbuilder官網給出的解決問題的方法，在原vue專案中又是引入qs ，又是引入es6-primse，然並卵

最後的最後在專案的manife.json配置中添加了一個配置：在plus的下面

"kernel":{
 "ios":"UIWebview"
},

不是專業app開發，表示不懂，問題解決，記錄下日誌

以上這篇淺談vue專案利用Hbuilder打包成APP流程,以及遇到的坑就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援我們。