如何優雅的使用vue+Dcloud（Hbuild）開發混合app
最近在做混合app，前端架構用的是vue，打包app使用的是Dcloud，不過在開發過程中有一點不爽的是，如果想使用Dcloud提供的plus這個環境變量，難倒每次都得使用npm run build先把vue打包，然後再用Hbuild打開dist檔案夾，然後再手機上運作檢視鮮果嗎？
顯然這樣做讓人很不爽，根本沒有開發效率可談。那麼應該怎麼辦呢？
Hybrid App技術解析 -- 原理篇
是的，我們知道npm run build會生成一個dist檔案夾，裡面就是最終生成的靜态資源（js、css、index.html、圖檔等），而我們最後要打包的就是這一部分代碼。
而npm run dev是不會生成dist檔案夾以及那些靜态檔案的，也就是說dev沒有生成實體檔案，而是放在了記憶體中，我們是沒有辦法拿到這些靜态檔案的。
現在我們需要的就是在運作dev的時候也生成實體檔案，該怎麼實作呢？
這裡感謝Kees Kluskens大神提供了這個插件，我們可以利用這個插件在運作dev的時候生成實體檔案。
首先現在項目中安裝一下該插件，npm i --save-dev webpack-dev-middleware-hard-disk。然後隻需要在項目build/webpack.dev.conf.js中添加下面這段代碼：
這樣就會在項目中生成dist檔案夾，裡面有一個app.js，而且如果修改代碼儲存會自動更新app.js。注意這裡不會像build那樣生成index.html，不過問題也不大，隻需要把項目根目錄下的index.html複制到dist檔案夾下，然後把app.js引入index.html，代碼如下：
但是如果隻配置這一個地方，隻會在dist生成app.js，如果項目比較大，app.js的體積會比較大，如果我們還想像build那樣生成vendor.js和manifest.js（app.js、vendor.js、manifest.js的差別這裡不做過多解釋），還需要繼續在build/webpack.dev.conf.js檔案裡面的plugins添加下面代碼：
這樣就會在dist檔案夾下生成三個檔案，app.js,manifest.js,vendor.js，由于還是運作在dev環境下，dev環境預設開了熱更新，是以這三個檔案也是熱更新的。
然後在index.html中引入分别引入這三個檔案，引入順序為manifest.js > verdor.js > aoo.js 代碼如下：
到此dist檔案夾就處理完了，dist目錄截圖：
然後就是把上面生成的dist檔案夾再Hbuild中打開，首先打開Hbuild開發工具，然後依次 檔案>打開目錄 選擇dist檔案夾，然後我們需要吧dist檔案夾轉換成app項目：
這樣就會在dist目錄添加一個manifest.json檔案，這樣就成功轉為了一個app項目：
用資料線把手機插入電腦（打開開發者調試模式），然後再Hbuild中依次 運作>手機運作> 選擇你的手機 ：
然後稍等一會，就會在手機上運作看到效果。這時如果打開vue項目進行開發，比如修改了app.vue，隻需要Ctrl+s儲存一下app.vue，就會在手機上看到更改後的效果。