Vite作为前端构建工具，打包生成的资源依然是Web应用，如果想将这个web应用转换成App应用，可以借助HBuilderX。这里要说明几点，以免打包成App之后，App启动白屏显示。
1. 如果vue3项目使用了路由，那么需要将默认的history模式改成hash模式：
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
// history: createWebHistory(import.meta.env.BASE_URL), 原来默认是history模式
history: createWebHashHistory(import.meta.env.BASE_URL), //这里改成hash模式2. vite配置文件vite.config.js:
export default defineConfig({
base: './', //这里要添加一下路径配置
plugins: [
vue(),
vueDevTools(),
AutoImport({
resolvers: [VantResolver()],
}),
Components({
resolvers: [VantResolver()],
}),
],
... // 其他配置
})vite的配置需要修改一下，添加base参数的值为'./'。这样保证后面资源打包的时候不会出现资源访问错误。
3. 以上修改完毕之后，npm run build 进行生产环境的资源构建，生成对应的资源文件：
4. 打开HBuilderX，并且登陆你的账号（必须），然后新建一个5+App的项目，选择默认模板。
5. 将第三步生成的静态资源目录assets整个目录和index.html文件，一起复制到HBuilderX当前的这个5+App的项目目录内，注意，vite打包之后生成的index.html复制过来会覆盖HBuilderX当前项目的index.html文件。
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右键可以发送到手机进行安装。
