Vue項目打包成移動端APP

需要準備的工具：Hbuilder

首先打包vue到dist目錄

npm run build

然后再Hbuilder中打開dist目錄

首先可以看到dist目錄的圖片是一個 W 字樣的圖標，表示這是一個 web項目

然后將dist包含的 web項目 轉換為 移動 APP項目

 此時可以看到dist目錄的文件圖標由 W 變成了 A，說明此時的web項目已經(jīng)變成了移動APP項目 ，而且此時生成了一個新的文件manifest.json

下面要做的就是在manifest.json中配置移動APP所需要的配置項

應用信息配置

appid需要登錄后才能獲取

圖標配置

啟動圖片

SDK配置

模塊權限配置

頁面引用關系

頁面引用關系分析并不是完全正確的，對于未被檢測到文件需要手動添加到打包項目中去

代碼視圖

此視圖中會顯示所有的配置信息

前幾步配置完成后，就可以在手機上進行真機調試了

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

接下來就是啟動Hbuilder真機調試了

連接后，會在手機上自動安裝一個HbuilderAPP，用于真機調試

真機測試沒有問題，就可以進行下一步---》打包apk了

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

最后將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：首屏展示后，路由無法跳轉，點擊無效

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

因為動態(tài)加載的資源地址為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說加載動態(tài)加載的資源均為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

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

最新評論