使用 HBuilder 将 Vue 项目打包成手机 App

在开发移动端 app 时可以选择原生 app 和 webapp， 原生 app 体验好，开发成本高，相对的 webapp 体验要差，开发成本低。webapp 要求很低，可以说只要会开发web 站就能开发 webapp，这里不讨论怎么选择，我们讨论怎么将已经开发好的 web 站打包成 webapp。我们以一个热门的 Vue 技术栈的项目举例。

技术栈

• webpack
• vue
• vue-router
• vuex

工具

• HBuilder

实际操作

1. 安装hbuilder
2. webpack 打包项目
3. 将 webpack 打包的文件导入 HBuilder
4. 插上数据线真机调试
5. 打包发行

安装 HBuilder

这里以 Windows 安装 HBuilder 为例，安装很简单，先下载 HBuilder 安装包，然后解压安装包，直接运行 HBuilder.exe 执行文件。

webpack 打包项目

在打包之前一定要修改 config 目录下的 index.js 文件中的 bulid 模块打包配置项，否则会出现空白，如图

修改前

assetsPublicPath= '/'，。

修改后

assetsPublicPath='./'

然后在根目录下执行

npm run build

会在目录下产生一个 dist 目录，dist 目录包含一个 index.html 文件和一个 static 目录，如下图

将 webpack 打包的文件导入 HBuilder

打开 HBuilder,文件>打开目录，如下图：

然后选择刚才打包的 dist 目录，如下图

这时我们在左边的项目管理器下面看到一个 dist 项目，但此时 dist 标志是 W，表示是 web 站，如下图：

我们需要将 web 站，转换为移动站，右键点击 dist,选择转换移动App选项，然后就可到，此时的标准是一个 A,表示是移动站。

插上数据线真机调试

插上数据线，手机要 usb 调试要确保是打开的，然后直接点击运行>真机调试>启动HBuilder基座设备运行，就可以看到运行效果了。

打包发行

关于怎么打包发行， HBuilder 有详细的文档

FAQ

1、Vue 项目用 Webpack 打包后导入是 HBuilder 是空白页？

在打包之前一定要修改 config 目录下的 index.js 文件中的 bulid 模块打包配置项,上文已经提到了。

2、error: Loading chunk 2 failed

请检查 vue-router 路由配置的模式是不是 hash,如不是，改为 hash 模式，或者直接把模式配置删除。

感谢阅读，我是sevdot，全栈开发工程师和终身学习者。
不喜勿喷，以人为善，比聪明更重要。
欢迎留言和关注，且接受任何宝贵的建议。
了解更多