--- title: 利用HBuilderX打包vue3的移动端项目为App避免App启动白屏 description: Vite作为前端构建工具，打包生成的资源依然是Web应用，如果想将这个web应用转换成App应用，可以借助HBuilderX。 author: chaihongjun category: operations published: 2025-02-03 url: https://chaihongjun.me/operations/45.html --- # 利用HBuilderX打包vue3的移动端项目为App避免App启动白屏 Vite作为前端构建工具，打包生成的资源依然是Web应用，如果想将这个web应用转换成App应用，可以借助HBuilderX。这里要说明几点，以免打包成App之后，App启动白屏显示。 1. 如果vue3项目使用了路由，那么需要将默认的history模式改成hash模式： MDBLOCK0 2. vite配置文件vite.config.js: MDBLOCK1 vite的配置需要修改一下，添加base参数的值为'./'。这样保证后面资源打包的时候不会出现资源访问错误。 3. 以上修改完毕之后，npm run build 进行生产环境的资源构建，生成对应的资源文件： ![利用HBuilderX打包vue3的移动端项目为App避免App启动白屏](https://chaihongjun.me/public/uploads/images/20250203/1738561492641665.jpg) 4. 打开HBuilderX，并且登陆你的账号（必须），然后新建一个5+App的项目，选择默认模板。 5. 将第三步生成的静态资源目录assets整个目录和index.html文件，一起复制到HBuilderX当前的这个5+App的项目目录内，注意，vite打包之后生成的index.html复制过来会覆盖HBuilderX当前项目的index.html文件。 ![利用HBuilderX打包vue3的移动端项目为App避免App启动白屏](https://chaihongjun.me/public/uploads/images/20250203/1738561738951082.png) 6. 点击HBuilderX当前项目的manifesy.json配置文件进行编辑，主要是对打包App做一些简单配置。 基础配置：AppID 这个自动生成，如果没有登陆HBuilderX则不会生成，所以打包生成App之前一定要登陆HBuilderX账号。应用名称自己设置，以及后面的关于应用的配置可以不做设置 图标配置：自动生成图标这里，选择一个png图标，并且推荐点击【自动生成所有图标并替换】，这样后面的图标配置一次性设置完毕。 启动界面配置：【启动界面显示等待雪花】如果勾选了，建议取消。 模块配置：这里主要是各种模块是使用的配置，如果不涉及，建议不勾选，如果需要权限，则HBuilderX账号是实名认证必须去先认证。至于广告部分的也建议不勾选。 权限配置：如果不涉及，不做修改。 App常用其它设置：CPU的支持一般不选择x86,使用默认的即可 7. 以上配置完毕之后建议先【运行】-【运行到手机或模拟器】-【运行到Android App基座】。也就是相当于一个手机真机环境测试。这个前提是安卓手机必须是开启USB调试模式，并且手机连接电脑。当成功之后，手机会安装一个以HBuilder做为logo的应用，就是打包之后的测试应用。调试这个应用，如果没有问题 8. 可以【发行】-【App-Android/iOS-云打包】，证书建议使用云端证书，公共测试证书已经下线。打包成功，APK会生成在unpackage\release\apk目录内，选中这个APK右键可以发送到手机进行安装。 ![利用HBuilderX打包vue3的移动端项目为App避免App启动白屏](https://chaihongjun.me/public/uploads/images/20250203/1738562734180543.png) --- > 本文首发于 [chaihongjun.me | 柴宏俊 web 技术学习笔记](https://chaihongjun.me/operations/45.html)，采用 CC BY-NC-ND 4.0 协议，转载请保留出处与链接。