Vue2+Hbuilder 开发 H5+App 优雅调试

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`
    }
  },
}