使用Vite打包在HbuilderX上部署APP

Vue部分

修改vite.config.js配置的base属性。

将打包出来的index.html的文件引用使用相对路径的方式。

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

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
            '@': fileURLToPath(new URL('./src', import.meta.url))
        }
    },
    server: {
        port: 5173,
        host: '0.0.0.0',
    },
    base: './',
})

修改路由的模式，将createWebHistory改为createWebHashHistory。

在使用 HBuilder 打包成 App 时，通常会使用 WebView 来加载 Vue 应用。在这种情况下，使用 createWebHistory 可能会导致白屏问题，原因如下：

服务器配置问题：在移动设备上，WebView 可能无法正确处理 History API 的路径，导致无法正确加载应用的入口文件。

URL 处理问题：WebView 可能无法正确处理标准的 URL 路径，而哈希模式的路径则更容易被处理。

HbuilderX部分

新建5+App项目。

配置manifest.json

获取AppID
选择需要的权限
如果不需要联系人权限的将其删掉

将vite打包好的dist文件夹中的文件直接移动到当前项目根目录下。

选择原生App-云打包即可

HbuilderX离线打包App

uni-app使用HBuilder X编辑器本地打包apk步骤说明_hbuilder-integrate-as-CSDN博客

安装

安装Android Studio，Android Studio 下载文件归档 | Android Developers (google.cn)
下载HBuilderX对应的Android SDK，SDK的版本一定要注意和HBuilder X的版本匹配，Android 离线SDK - 正式版 | uni小程序SDK (dcloud.net.cn)

证书

Android平台签名证书(.keystore)生成指南 - DCloud问答

安装jre，https://www.oracle.com/java/technologies/downloads/#java8，推荐安装`jre1.8.0_201`，并配置环境变量
验证
java -version

生成证书

d:
keytool -genkey -alias {证书别名} -keyalg RSA -keysize 2048 -validity 36500 -keystore {证书名称}.keystore

# demo
keytool -genkey -alias demo -keyalg RSA -keysize 2048 -validity 36500 -keystore demo.keystore

需要填入的信息

Enter keystore password:  //输入证书文件密码，输入完成回车  
Re-enter new password:   //再次输入证书文件密码，输入完成回车  
What is your first and last name?  
  [Unknown]:  //输入名字和姓氏，输入完成回车  
What is the name of your organizational unit?  
  [Unknown]:  //输入组织单位名称，输入完成回车  
What is the name of your organization?  
  [Unknown]:  //输入组织名称，输入完成回车  
What is the name of your City or Locality?  
  [Unknown]:  //输入城市或区域名称，输入完成回车  
What is the name of your State or Province?  
  [Unknown]:  //输入省/市/自治区名称，输入完成回车  
What is the two-letter country code for this unit?  
  [Unknown]:  //输入国家/地区代号（两个字母），中国为CN，输入完成回车  
Is CN=XX, OU=XX, O=XX, L=XX, ST=XX, C=XX correct?  
  [no]:  //确认上面输入的内容是否正确，输入y，回车  

Enter key password for <testalias>  
        (RETURN if same as keystore password):  //确认证书密码与证书文件密码一样（HBuilder|HBuilderX要求这两个密码一致），直接回车就可以

执行完命令后D盘根目录下会出现一个demo.keystore证书文件

查看证书信息

keytool -list -v -keystore demo.keystore

证书信息

输入密钥库口令:

密钥库类型: JKS
密钥库提供方: SUN

您的密钥库包含 1 个条目

别名: xxx
创建日期: 2024-11-8
条目类型: PrivateKeyEntry
证书链长度: 1
证书[1]:
所有者: CN=john, OU=john, O=john, L=john, ST=john, C=john
发布者: CN=john, OU=john, O=john, L=john, ST=john, C=john
序列号: xxx
生效时间: Fri Nov 08 17:35:26 CST 2024, 失效时间: Sun Oct 15 17:35:26 CST 2124
证书指纹:
         SHA1: xxx
         SHA256: xxx
签名算法名称: SHA256withRSA
主体公共密钥算法: 2048 位 RSA 密钥
版本: 3

扩展:

#1: ObjectId: xxx Criticality=false
SubjectKeyIdentifier [
KeyIdentifier [
0000: xxx
0010: xxx                            
]
]