如何優雅的使用vue+Dcloud（Hbuild）開發混合app

時間 2019-11-21

標籤如何優雅使用 vue+dcloud vue dcloud hbuild 開發混合 app 简体版

原文原文鏈接

如何優雅的使用vue+Dcloud（Hbuild）開發混合app

最近在作混合app，前端框架用的是vue，打包app使用的是Dcloud，不過在開發過程當中有一點不爽的是，若是想使用Dcloud提供的plus這個環境變量，難倒每次都得使用npm run build先把vue打包，而後再用Hbuild打開dist文件夾，而後再手機上運行查看鮮果嗎？

顯然這樣作讓人很不爽，根本沒有開發效率可談。那麼應該怎麼辦呢？css

若是npm run dev也能想build那樣生成須要的靜態文件該多好

是的，咱們知道npm run build會生成一個dist文件夾，裏面就是最終生成的靜態資源（js、css、index.html、圖片等），而咱們最後要打包的就是這一部分代碼。html

而npm run dev是不會生成dist文件夾以及那些靜態文件的，也就是說dev沒有生成物理文件，而是放在了內存中，咱們是沒有辦法拿到這些靜態文件的。前端

如今咱們須要的就是在運行dev的時候也生成物理文件，該怎麼實現呢？vue

webpack-dev-middleware-hard-disk插件

這裏感謝Kees Kluskens大神提供了這個插件，咱們能夠利用這個插件在運行dev的時候生成物理文件。node

首先如今項目中安裝一下該插件，npm i --save-dev webpack-dev-middleware-hard-disk。而後只須要在項目build/webpack.dev.conf.js中添加下面這段代碼：webpack

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，代碼以下：git

<!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添加下面代碼：github

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環境默認開了熱更新，因此這三個文件也是熱更新的。web

而後在index.html中引入分別引入這三個文件，引入順序爲manifest.js > verdor.js > aoo.js 代碼以下：npm

<!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目錄截圖：