[ Vue ] HBuilderX打包APK流程及问题

一、背景:

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处理各种坑 - 简书