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 项目文件也会实时更新静态资源
