Vue項目打包成移動端APP
需要準備的工具：Hbuilder
目錄
首先打包vue到dist目錄
npm run build
然後再Hbuilder中打開dist目錄
首先可以看到dist目錄的圖片是一個 W 字樣的圖標，表示這是一個 web項目
然後將dist包含的 web項目 轉換爲 移動 APP項目
此時可以看到dist目錄的文件圖標由 W 變成了 A，說明此時的web項目已經變成了移動APP項目 ，而且此時生成了一個新的文件manifest.json
下面要做的就是在manifest.json中配置移動APP所需要的配置項
應用信息配置
appid需要登錄後才能獲取
圖標配置
啓動圖片
SDK配置
模塊權限配置
頁面引用關係
頁面引用關係分析並不是完全正確的，對於未被檢測到文件需要手動添加到打包項目中去
代碼視圖
此視圖中會顯示所有的配置信息
前幾步配置完成後，就可以在手機上進行真機調試了
首先使用usb數據線連接自己的手機，然後將手機設置爲開發者模式中的USB調試模式
接下來就是啓動Hbuilder真機調試了
連接後，會在手機上自動安裝一個HbuilderAPP，用於真機調試
真機測試沒有問題，就可以進行下一步---》打包apk了
菜單欄點擊【發行】【雲打包-打原生安裝包】
最後將apk安裝包安裝到手機上就可以正常使用了
Vue打包成.apk安裝的過程中遇到的問題
問題1：打包成的apk在真機上顯示空白界面
原因：項目文件路徑引用錯誤，導致文件加載爲404
vue打包後的文件時存在於dist目錄下的，也就是說dist目錄作爲根目錄。
在dist目錄中啓動一個本地服務其訪問地址爲http://localhost:8080/index.html,即可訪問首頁dist目錄下的index.html文件並加載對應的js,css文件，也就是說文件啓動根目錄是和dist目錄中的index.html是平級的。
- dist
-- css
-- img
-- js
-- index.html
-- 啓動的根目錄
而打包成apk文件後在真機上測試，其訪問的地址爲http://localhost:8080/dist/index.html，多了一層dist，導致頁面空白，加載的文件爲404找不到,也就是說打包後的啓動目錄的根目錄是個dist平級的不是和dist目錄中的index.html平級。
- dist
-- css
-- img
-- js
-- index.html
- 啓動的根目錄
解決方法：
在vue打包成dist文件前，修改vue.config.js配置文件，將打包文件的資源文件更改爲當前目錄下的絕對路徑
mudule.exports = {
// publicPath: '/',
publicPath: './'
}
問題2：首屏展示後，路由無法跳轉，點擊無效
原因：文件動態加載的資源地址404找不到
因爲動態加載的資源地址爲http://localhost:8080/css/xxx.css和http://localhost:8080/js/xxx.js，而實際上文件的資源路徑是http://localhost:8080/dist/css/xxx.css和http://localhost:8080/dist/js/xxx.js說加載動態加載的資源均爲404
解決方法：
更改vue項目中的路由模型配置：將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