HubliderX将Vue3离线包打包生成App，以及解决打包后的APP出现白屏的问题（简单示例）

一、准备

1. HBuilderX官网，先去官网下载需要的工具
2. 到vue项目中把rooter的模式由“history”改为“hash”，否则在本地真机调试时会出现白屏
   
3. 更改 vue.config.js文件，不修改的话，同样会出现白屏（原因：app打开需要在服务端，而不是本地打开file模式下。测试时需要将根路径，改为相对路径）
   
4. 如果出现找不到process，根据提示安装对应的第三方库

npm i --save-dev @types/node

5. 执行npm run build，正在根目录下生成dist文件
   

二、HBuilderX中做的操作

6. .文件 ---->新建 ---->项目------>H5+项目
   
7. 将红框里面的东西都删掉，只保留一个 manifest.json
8. 将打包的dist文件里面的文件拖进项目中
   
9. 点击 manifest.json的配置文件，可以更改app的一些配置，如应用名称、图标、版本号等
   

支持的CPU类型，这里最好都选上，毕竟手机的CPU很多种

因为是离线的dist包，所以不会自动生成 appid，可以登录开发者中心自行创建。开发者中心

10. 最后点击发行---->原生App-云打包，选择如下，点击打包(默认有开屏广告，可以勾掉)
    
11. 等待完成即可返回.apk文件路径，进入此路径找到apk文件，复制apk文件，通过微信发送到手机，点击安装即可
    
    生成的apk文件如下图所示
    
    以上为vue3离线包生成app