一、背景:
1. Vue 手机端 项目在WebStrom中创建并开发后,需要通过HBuilderX打包为apk
2. 脚手架Vue CLI 4.X
3. HBuilderX
二、解决问题
1. 解决HbuilderX打包后项目空白问题
2. 解决打包后路由跳转问题
三、操作步骤:
1. 关闭路由的history模式
2. 根目录创建vue.config.js文件并添加生产环境打包路径
3. 打包
npm run build
根目录下生成dist文件夹
4. 打开HBuilderX新建 5+app 项目
5. 删除 css img js文件夹,同时把dist复制到项目中
6. 配置manifest.json
6.1基础配置
写应用名称,指定应用入口
6.2 图标配置
浏览一张图片,自动生成所有。
6.3 启动图、SDK、权限、app常用其他设置根据情况自行配置。仔细看每一项说明基本能弄明白。
7. 云打包
鼠标点击左侧项目名后,点菜单栏-发行-云打包
8. 注意打包需要登录邮箱、等待打包完成后可以下载。
四、参考博客
1.HBuilderX创建vue项目打包成移动APP - 简书
2.用HBuilderX 打包 vue 项目 为 App 的步骤 - 暗恋桃埖源 - 博客园
3.npm run build 打包后(直接打包白屏),如何运行在本地查看效果(Apache服务) - 暗恋桃埖源 - 博客园
4.利用Hbuilder将Vue项目打包成apk_JavaScript_YingDaoMonkey的博客-CSDN博客
5.解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题_JavaScript_for_weber的博客-CSDN博客
6.「Vue」vue cli3项目打包为APP方法及坑点 - 子谦0618 - 博客园
7. vue 利用HBuilder打包apk处理各种坑 - 简书