1 問題描述
在做 Hybrid App 開發，前端框架用的是 Vue，打包 App 使用的是 Hbuilderx。
在開發過程中有一點不爽的是，如果想使用 H5 提供的 plus 這個環境變量，每次都得使用npm run build先把 Vue 打包，然后再用 Hbuilderx 打開 dist 文件夾，然后再手機上運行查看效果
2 解決方案
對 Vue 進行打包時，通過執行npm run build會生成一個 dist 文件夾，里面就是最終生成的靜態資源（js、css、index.html、圖片等），而最后通過在 Hbuilderx 打包的就是這一部分代碼。
在 Vue 開發模式下（npm run server）是不會生成 dist 文件夾以及靜態資源的，也就是說在 Vue 開發模式下，沒有生成物理文件，而是放在了內存中，如果我們在 Vue 開發模式下也可以拿到這些靜態文件，就可以通過 Hbuilderx 實現手機端（真機/模擬器）的動態調試。
3 解決方法
3.1 配置 Vue 項目
感謝 Kees Kluskens 大神提供的 webpack-dev-middleware-hard-disk 插件，實現在 Vue 開發模式下，獲取 dist 文件夾和里面的靜態資源
首先現在 Vue 項目中安裝一下該插件，npm install webpack-dev-middleware-hard-disk --save-dev，然后配置項目的 vue.config.js 文件
const version = require('./package.json').version
const assetsPath = 'static'
module.exports = {
publicPath: './',
outputDir: 'dist',
assetsDir: assetsPath,
// 調整webpack配置
configureWebpack: (config) => {
if (env === 'production') {
// 為生產環境修改配置...
} else {
// 為開發環境修改配置
const webpack = require('webpack')
// 由於每次修改都會產生熱更新文件，文件名很零碎，
// 設置熱更新文件名為固定名字，每次修改會替換上一次的文件
config.output.hotUpdateChunkFilename = 'hot-update.js'
config.output.hotUpdateMainFilename = 'hot-update.json'
require('webpack-dev-middleware-hard-disk')(webpack(config), {
publicPath: config.output.publicPath,
quiet: true
})
}
},
// 修改css文件名
css: {
extract: {
filename: `${assetsPath}/css/[name].${version}.css`,
chunkFilename: `${assetsPath}/css/[name].${version}.css`
}
},
}
3.2 Hbuilderx 設置
在 Hbuilderx 中，在 Vue 項目路徑下，創建名為 dist 的 H5+App項目，只保留 manifest.json 文件，刪除其它文件。
在 Vue 中執行npm run server，發現 Hbuilderx 的 dist 項目中出現了想要的靜態資源，且可以正在 運行到手機或模擬器中運
在 Vue 開發時，發生文件修改時，Hbuilderx 的 dist 項目文件也會實時更新靜態資源
