Vue项目打包成APP，使用 HBuilderX 打 5+ App

这里以Vue2为例，使用Vite的项目打包静态资源可以去参考一下这篇文章

Vue3 Vite项目打包静态文件之后无法以file协议访问

路由改成哈希模式

vue.config.js 里面 publicPath: "./",

默认情况下打包成的 安卓APP 按一次返回键就会退出 APP 正常不应该这样，用 5+ app 的 plus api 来处理一下这个问题

创建一个js文件

document.addEventListener("plusready", () => { // 监听plus api 是否加载完成
  const webview = window.plus.webview.currentWebview(); // 获取webview
  let flag = 0; 
  window.plus.key.addEventListener('backbutton', () => { // 监听返回键
    webview.canBack((e) => { // webview事件,如果是首页参数值为false,其他页面为true
      if (e.canBack) { // 不是首页执行webview返回操作
        webview.back();
      } else {
        // 按一次提示再按一次退出应用 两秒内按两次退出应用
        if (flag === 1) window.plus.runtime.quit();
        flag = 1;
        plus.nativeUI.toast("再按一次退出应用");
        setTimeout(() => {
          flag = 0;
        }, 2000);
      }
    });
  });
});

在 main.js 里面引入

import "./utils/AndroidBack.js";

之后打包生成dist文件夹
vue这边的准备工作就做好了

使用 HBuilderX 创建一个空的 5+ App 项目

删除不需要的文件

把vue打包好的 dist 文件夹里面的文件放进去

可以连接手机或者模拟器测试一下

测试没问题就可以打包成 apk 了

没有证书可以先试用公测证书试一下，需要用自己的可以去 Dcloud 的后台申请一个

完活儿。