一、背景
如果一个前端想快速开发app，最快的方式应该是用uni-app。 但我之前脑袋秀逗了，只想到用vue3开发h5，然后部署之后把这个h5的链接打包成apk，这种方式会存在一个问题，当手机没网连不上服务器的时候，页面都不会显示，体验感很不好(如果已有存在的用android开发的app，用webview嵌入几个网页没问题,就算没网，也可以loading显示，但我们之前没有已开发的app)。 但如果用uni-app重新开发时间又来不及，网上搜了搜，有方法能直接把vue3打包成apk，这种方式和直接打包h5链接生成的apk的区别是前者是相当于把所有资源打包在apk包里，支持离线模式，当没网状态下也会有页面显示，但若需要和后端交互，就还是需要有网才能交互成功。
二、具体打包方式
能用Cordova、Capacitor、HBuilderX直接将vue3打包成apk，稍微了解了下还是觉得HBuilderX最简单。
三、具体方式
3.1、HBuilderX下载
1、进入官网www.dcloud.io/hbuilderx.h… ，点击下载，这个包是免安装的，下载后解压即可，双击HBuilderX.exe即可启动程序。
3.2、新建项目
点击文件=》新建=》项目，新建一个“5+APP”项目，输入项目名称。
3.3、打包vue3项目
1、在vite.config.js中添加"base:'./"。
如果不添加那么打包生成的dist/index.html都会是下图这种路径，导致访问不到，
添加了这一行后会是图三这种路径。
2、把路由中的createWebHistory改为createWebHashHistory。这是因为原生容器的文件系统结构与路由匹配机制的差异。这里设置不当会导致白屏。
3、修改“.env.production”文件，将VITE_AOO_BASE_API修改后端网址，即在nginx中prod-api代理的网址。这是用于和后端的接口交互，因为不存在nginx去代理了。
4、运行npm run build生成dist包。
3.4、将Vue3打包到项目里
1、删除之前生成的5+APP项目下的一些文件，只留下unpackage文件夹和manifest.json文件。
2、将dist下所有的文件都复制到5+APP项目下。生成如下目录结构。
3.5、真机运行
1、首先打开手机的开发者模式。一般是连续点击七次版本号就会打开开发者选项。 2、打开USB调试。设置里搜索“开发者选项”，将调试里的“USB调试”打开。 3、用数据线连接手机和电脑，选择 USB用于“传输文件/Android Auto”，并在弹出的弹窗里选择 “允许”USB调试。 4、选择运行=》运行到手机或模拟器=》运行到Android APP基座(D)，会弹出图二所连接的android设备，点击运行即可。会自动在手机上安装此apk并运行，当运行中报错以及页面中的console语句都会在控制台里显示。
3.6、打包成apk
当真机测试没问题后，可将此项目打包成apk。
1、配置AppID。 点击manifest.json文件，会发现AppID还没有配置，这是必须要配置的。点击“DCloud AppID使用说明”跳转到官方网页，
点击此网页中的“开发者中心”去创建AppID。
如果已有账号则直接登录，没有账号的话需要在这里注册一个。
在登录进入页面后，可以看到自己的项目以及Appid，将这个Appid填写到manifest.json源码中即可
2、配置APP图标，APP名字等。其他的一些模块、权限配置则按需配置。
3、点击发行=》APP-Android/iOS-云打包(P)。会让你登录HBuilderX账号，就是之前注册登录的那个账号。选择“使用云端证书”，把勾选的广告都去掉。点击打包后弹出的警告不用管，但是如果报错和通讯录相关的，需要实名则需要进行实名，但我其实用不到这个权限，我就直接去manifest.json中把这个权限去掉了。另外模块配置里很多我都用不到的以及权限配置里很多用不到的我都去掉了。再直接打包即可。
打包成功后，点击“打开所在目里”即可找到该APK。
四、踩坑记录
1、真机运行的时候找不到设备。
因为虽然开了开发者模式，但是开发者选项里的“USB调试”没有开
2、运行在模拟器上时报错。“Failed to load module script: The server responded with a non-JavaScript MIME type of "text/plain". Strict MIME type checking is enforced for module scripts per HTML spec. ”
因为之前真机运行不出来就尝试下载了一个模拟器，模拟器上报这个错误。是因为模拟器版本太低了！！！(捣鼓了一天，气死我了)，直接用真机运行就好了。
3、vue3中有用iframe引用的页面，但是到了真机运行就会报错“位于file:////static/XXX的网页无法加载，因为net:Err_File_Not_found”。
原因在于vue3写的绝对路径，在web端运行时使用http:// 协议，路径/static/...会指向public/static，但打包成apk后，应用使用file:// 协议加载本地文件，路径/static/...会被解析为设备的根目录(而非项目根目录，非应用沙盒内)，所以打包的时候要把这个路径改为相对路径，去掉前面的斜杠<iframe src="static/video/index.html"></iframe>
4、android的webview不允许通过file:// 协议直接加载Wasm文件。所以如果一些视频插件里需要直接引入.wasm文件的话那么打包成apk这个视频插件是用不了的，需要更换视频插件，目前使用mpegts.js还可以，可以设置追帧，但是全屏横屏这个不好搞。
