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`
}
},
}
3.2 Hbuilderx 设置
在 Hbuilderx 中,在 Vue 项目路径下,创建名为 dist 的 H5+App项目,只保留 manifest.json 文件,删除其它文件。
在 Vue 中执行npm run server
,发现 Hbuilderx 的 dist 项目中出现了想要的静态资源,且可以正在 运行到手机或模拟器中运
在 Vue 开发时,发生文件修改时,Hbuilderx 的 dist 项目文件也会实时更新静态资源