如何優雅的使用vue+Dcloud（Hbuild）開發混合app
最近在做混合app，前端框架用的是vue，打包app使用的是Dcloud，不過在開發過程中有一點不爽的是，如果想使用Dcloud提供的plus這個環境變量，難倒每次都得使用npm run build先把vue打包，然后再用Hbuild打開dist文件夾，然后再手機上運行查看鮮果嗎？
顯然這樣做讓人很不爽，根本沒有開發效率可談。那么應該怎么辦呢？
Hybrid App技術解析 -- 原理篇如果npm run dev也能想build那樣生成需要的靜態文件該多好
是的，我們知道npm run build會生成一個dist文件夾，里面就是最終生成的靜態資源（js、css、index.html、圖片等），而我們最后要打包的就是這一部分代碼。
而npm run dev是不會生成dist文件夾以及那些靜態文件的，也就是說dev沒有生成物理文件，而是放在了內存中，我們是沒有辦法拿到這些靜態文件的。
現在我們需要的就是在運行dev的時候也生成物理文件，該怎么實現呢？
webpack-dev-middleware-hard-disk插件
這里感謝Kees Kluskens大神提供了這個插件，我們可以利用這個插件在運行dev的時候生成物理文件。
首先現在項目中安裝一下該插件，npm i --save-dev webpack-dev-middleware-hard-disk。然后只需要在項目build/webpack.dev.conf.js中添加下面這段代碼：
var compiler = webpack(devWebpackConfig)
var devMiddleware = require('webpack-dev-middleware-hard-disk')(compiler, {
publicPath: devWebpackConfig.output.publicPath,
quiet: true
})
這樣就會在項目中生成dist文件夾，里面有一個app.js，而且如果修改代碼保存會自動更新app.js。注意這里不會像build那樣生成index.html，不過問題也不大，只需要把項目根目錄下的index.html復制到dist文件夾下，然后把app.js引入index.html，代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>app</title>
</head>
<body>
<div id="app">
<script src="app.js"></script>
</div>
</body>
</html>
但是如果只配置這一個地方，只會在dist生成app.js，如果項目比較大，app.js的體積會比較大，如果我們還想像build那樣生成vendor.js和manifest.js（app.js、vendor.js、manifest.js的區別這里不做過多解釋），還需要繼續在build/webpack.dev.conf.js文件里面的plugins添加下面代碼：
new webpack.optimize.CommonsChunkPlugin({
name: 'vendor',
minChunks (module) {
return (
module.resource &&
/\.js$/.test(module.resource) &&
module.resource.indexOf(
path.join(__dirname, '../node_modules')
) === 0
)
}
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'manifest',
minChunks: Infinity
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'app',
async: 'vendor-async',
children: true,
minChunks: 3
}),
這樣就會在dist文件夾下生成三個文件，app.js,manifest.js,vendor.js，由於還是運行在dev環境下，dev環境默認開了熱更新，所以這三個文件也是熱更新的。
然后在index.html中引入分別引入這三個文件，引入順序為manifest.js > verdor.js > aoo.js 代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>app</title>
</head>
<body>
<div id="app">
<script src="manifest.js"></script>
<script src="vendor.js"></script>
<script src="app.js"></script>
</div>
</body>
</html>
到此dist文件夾就處理完了，dist目錄截圖：
在Hbuild中運行
然后就是把上面生成的dist文件夾再Hbuild中打開，首先打開Hbuild開發工具，然后依次 文件>打開目錄 選擇dist文件夾，然后我們需要吧dist文件夾轉換成app項目：
這樣就會在dist目錄添加一個manifest.json文件，這樣就成功轉為了一個app項目：
用數據線把手機插入電腦（打開開發者調試模式），然后再Hbuild中依次 運行>手機運行> 選擇你的手機 ：
然后稍等一會，就會在手機上運行看到效果。這時如果打開vue項目進行開發，比如修改了app.vue，只需要Ctrl+s保存一下app.vue，就會在手機上看到更改后的效果。