在開發移動端 app 時可以選擇原生 app 和 webapp， 原生 app 體驗好，開發成本高，相對的 webapp 體驗要差，開發成本低。webapp 要求很低，可以說只要會開發web 站就能開發 webapp，這里不討論怎么選擇，我們討論怎么將已經開發好的 web 站打包成 webapp。我們以一個熱門的 Vue 技術棧的項目舉例。

技術棧webpack

vue

vue-router

vuex

工具HBuilder

實際操作安裝hbuilder

webpack 打包項目

將 webpack 打包的文件導入 HBuilder

插上數據線真機調試

打包發行

安裝 HBuilder

這里以 Windows 安裝 HBuilder 為例，安裝很簡單，先下載 HBuilder 安裝包，然后解壓安裝包，直接運行 HBuilder.exe 執行文件。

webpack 打包項目

在打包之前一定要修改 config 目錄下的 index.js 文件中的 bulid 模塊打包配置項，否則會出現空白，如圖

圖片.png

修改前assetsPublicPath=?'/'，。

修改后assetsPublicPath='./'

然后在根目錄下執行npm?run?build

會在目錄下產生一個 dist 目錄，dist 目錄包含一個 index.html 文件和一個 static 目錄，如下圖

圖片.png

將 webpack 打包的文件導入 HBuilder

打開 HBuilder,文件>打開目錄，如下圖：

圖片.png

然后選擇剛才打包的 dist 目錄，如下圖

圖片.png

這時我們在左邊的項目管理器下面看到一個 dist 項目，但此時 dist 標志是 W，表示是 web 站，如下圖：

圖片.png

我們需要將 web 站，轉換為移動站，右鍵點擊 dist,選擇轉換移動App選項，然后就可到，此時的標準是一個 A,表示是移動站。

插上數據線真機調試

插上數據線，手機要 usb 調試要確保是打開的，然后直接點擊運行>真機調試>啟動HBuilder基座設備運行，就可以看到運行效果了。

打包發行

關于怎么打包發行， HBuilder 有詳細的文檔

FAQ

1、Vue 項目用 Webpack 打包后導入是 HBuilder 是空白頁？

在打包之前一定要修改 config 目錄下的 index.js 文件中的 bulid 模塊打包配置項,上文已經提到了。

2、error: Loading chunk 2 failed

請檢查 vue-router 路由配置的模式是不是 hash,如不是，改為 hash 模式，或者直接把模式配置刪除。

作者：sevdot

鏈接：https://www.jianshu.com/p/ba68990c41bc

打開App，閱讀手記

總結

以上是生活随笔為你收集整理的app vue 真机运行_使用 HBuilder 将 Vue 项目打包成手机 App的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。