在开发移动端 app 时可以选择原生 app 和 webapp， 原生 app 体验好，开发成本高，相对的 webapp 体验要差，开发成本低。webapp 要求很低，可以说只要会开发web 站就能开发 webapp，这里不讨论怎么选择，我们讨论怎么将已经开发好的 web 站打包成 webapp。我们以一个热门的 Vue 技术栈的项目举例。
技术栈
- webpack
- vue
- vue-router
- vuex
工具
- HBuilder
实际操作
- 安装hbuilder
- webpack 打包项目
- 将 webpack 打包的文件导入 HBuilder
- 插上数据线真机调试
- 打包发行
安装 HBuilder
这里以 Windows 安装 HBuilder 为例，安装很简单，先下载 HBuilder 安装包，然后解压安装包，直接运行 HBuilder.exe 执行文件。
webpack 打包项目
在打包之前一定要修改 config 目录下的 index.js 文件中的 bulid 模块打包配置项，否则会出现空白，如图
图片.png
修改前
assetsPublicPath= '/'，。
修改后
assetsPublicPath='./'
然后在根目录下执行
npm run build
会在目录下产生一个 dist 目录，dist 目录包含一个 index.html 文件和一个 static 目录，如下图
图片.png
将 webpack 打包的文件导入 HBuilder
打开 HBuilder,文件>打开目录，如下图：
图片.png
然后选择刚才打包的 dist 目录，如下图
图片.png
这时我们在左边的项目管理器下面看到一个 dist 项目，但此时 dist 标志是 W，表示是 web 站，如下图：
图片.png
我们需要将 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，全栈开发工程师和终身学习者。
不喜勿喷，以人为善，比聪明更重要。
欢迎留言和关注，且接受任何宝贵的建议。
了解更多
网友评论