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

技術棧

• webpack
• vue
• vue-router
• vuex

工具

• HBuilder

實際操作

1. 安裝hbuilder
2. webpack 打包專案
3. 將 webpack 打包的檔案匯入 HBuilder
4. 插上資料線真機除錯
5. 打包發行

安裝 HBuilder

這裡以 Windows 安裝 HBuilder 為例，安裝很簡單，先下載 HBuilder 安裝包，然後解壓安裝包，直接執行 HBuilder.exe 執行檔案。

webpack 打包專案

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

修改前

assetsPublicPath= '/'，。

修改後

assetsPublicPath='./'

然後在根目錄下執行

npm run build

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

將 webpack 打包的檔案匯入 HBuilder

開啟 HBuilder,檔案>開啟目錄，如下圖：

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

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

我們需要將 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，全棧開發工程師和終身學習者。
不喜勿噴，以人為善，比聰明更重要。
歡迎留言和關注，且接受任何寶貴的建議。
瞭解更多