通过uniapp将vite vue3项目打包为android系统的.apk包，并实现可自动升级功能

打包vue项目，注意vite.config.ts文件和路由文件设置

vite.config.ts，将base等配置改为./

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// import vueDevTools from 'vite-plugin-vue-devtools'

// https://vite.dev/config/
export default defineConfig({
  base: './', // Android打包配置
  server: {
    host: '0.0.0.0',
  },
  plugins: [
    vue(),
    // vueDevTools(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    },
  },
  define: {
    __BASE_URL__: JSON.stringify('./'), // Android打包配置
  },
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
  }
  
})

路由文件配置：router/index.ts

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router'
const router = createRouter({
  // Android打包将其换成createWebHashHistory，平时使用createWebHistory
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    // 路由配置
  ],
})
// 路由守卫
router.beforeEach((to, from, next) => {});

export default router

将上述两个文件配置完成后，注意axios请求地址改用生产环境url，随后打包vue项目

打开HBuilder X编辑器，创建5+App项目，并将打包好的vue项目所有文件放入即可

打开HBuilder X编辑器，文件->新建->项目
将打包后的vue代码全部粘贴到新创建的5+App项目中

Android自动更新配置

目前最新系统版本信息接口

@GetMapping("/getVersions")
public ResultJson getVersions(){
    Map<String, Object> data = new LinkedHashMap<>(); // 保持字段顺序
    data.put("versionCode", 2);                      // 当前版本号整型，每次递增
    data.put("versionName", "v2.0.0");                // 用户可见版本
    data.put("downloadUrl", "http://www.xxx.com/download.apk"); // 真实APK地址
    data.put("updateLog", "1. 优化性能 2. 修复已知BUG");
    data.put("isForceUpdate", 0);                // 是否强制更新

    return data;
}

创建js/app.js文件，代码如下

document.addEventListener('plusready', function() {
  // 确保5+环境就绪
  checkUpdate();
});

function checkUpdate() {
  // 获取目前最新版本、更新内容、最新android包接口
  const serverVersionUrl = 'http://www.xxx.com/server/getVersions';
  plus.runtime.getProperty(plus.runtime.appid, async (info) => {
    try {
		
      const res = await fetch(serverVersionUrl);
      const data = await res.json();
	  
	  // alert(JSON.stringify(data) + info.versionCode)
	  
      
      if (data.data.versionCode > info.versionCode) {
        showUpdateDialog(data.data);
      }
    } catch (e) {
      console.error('更新检查失败:', e);
    }
  });
}

function showUpdateDialog(updateInfo) {
  plus.nativeUI.confirm(
    `发现新版本 ${updateInfo.versionName}\n更新内容：${updateInfo.updateLog}`,
    (btn) => {
      if (btn.index === 0) { // 用户点击确定
		
        downloadApk(updateInfo.downloadUrl);
		
      } else if (updateInfo.isForceUpdate) {
        plus.runtime.quit();
      }
    },
    {
      title: "更新提示",
      buttons: ["立即更新", updateInfo.isForceUpdate ? "" : "取消"]
    }
  );
}

function downloadApk(url) {
	createPopup();
	
	const dtask = plus.downloader.createDownload(
		url,
		{ filename: '_downloads/update.apk' },
		(d, status) => {
			
			// progressDialog.close(); // 下载完成后关闭对话框
			if (status === 200) {
				plus.runtime.install(d.filename);
			} else {
				plus.nativeUI.alert('下载失败');
			}
		}
	);
	// 监听下载进度
	  dtask.addEventListener("statechanged", (task, status) => {
		  const percent = Math.floor((task.downloadedSize / task.totalSize) * 100);
		  console.log("下载中，当前进度=" + percent);
		  
		  if(percent == 100){
			  removeProgressContainer();
		  }else{
			  if(Number(percent) >= 0){
				changeProgress(percent);
			  }
			  
		  }
	  });
	
	
	dtask.start();
}

function createPopup(){
	var div = document.createElement("div");
	div.id = "progress_container";
	div.style.position = "fixed";
	div.style.top = "0";
	div.style.left = "0";
	div.style.width = "100%";
	div.style.height = "100%";
	div.style.backgroundColor = "rgba(0, 0, 0, 0.7)";
	div.style.zIndex= "99999";
	var p = document.createElement("p");
	p.style.color = "white";
	p.style.fontSize = "24px";
	p.style.textAlign = "center";
	p.style.marginTop = "100px";
	p.innerHTML = "系统更新中，请稍等...";
	div.appendChild(p);
	document.body.appendChild(div);
	// 添加进度条元素
	var progress = document.createElement("p");
	    progress.style.color = "white";
	    progress.style.fontSize = "28px";
	    progress.style.textAlign = "center";
	    progress.id = "progress";
	    progress.innerHTML = "0%";
		progress.style.marginTop = "20px";
	    div.appendChild(progress);
}
function changeProgress(percent){
	var progress = document.getElementById("progress");
	progress.innerHTML = percent + "%";
}
function removeProgressContainer(){
	var dom = document.getElementById("progress_container");
	if (dom) {
	    dom.parentNode.removeChild(dom);
	}
}