使用Vite打包的Framework7 Core集成Capacitor在Android无法运行

项目创建流程 #

通过framework7 create --ui创建示例项目，选择配置如下：

• Framework7 Core
• 简单Web应用
• 单视图
• 使用打包器(Vite)
• 传统CSS
• 集成Capacitor
• 添加Android平台
• 同步、构建并运行

问题现象 #

• Web模拟器运行正常（图A：Web端正常展示Framework7示例界面）
• Android模拟器仅显示空白白屏，控制台出现3个404错误（图B：提示index-BjpLy5vT.css、index-Bv0G57S5.js等资源文件缺失）

排查结果 #

创建无打包器的同款项目时，Web和Android平台均能正常运行。

软件版本 #

• OpenJDK 17.0.9
• Node v21.7.3
• Npm 10.8.1
• Framework7 8.3.3
• Capacitor/android 6.1.0
• Capacitor/app 6.0.0
• Capacitor/cli 6.1.0
• Capacitor/core 6.1.0

问题原因 #

核心是Vite打包的资源路径与Capacitor Android端的资源加载逻辑不匹配：

1. Vite默认打包生成带哈希的资源文件名，且默认使用绝对路径（以/开头）
2. Capacitor Android端从本地android/app/src/main/assets/public目录加载资源，绝对路径会导致解析错误，无法找到对应文件
3. 无打包器的项目没有哈希文件名和路径配置问题，因此可正常加载

解决方案 #

1. 修改vite.config.js配置文件，将base设置为相对路径：

export default {
  base: './',
  // 保留原有其他配置
}

2. 重新打包项目：

npm run build

3. 同步Capacitor资源到Android项目：

npx cap sync android

4. 重新构建并运行Android项目：

npx cap run android

内容的提问来源于stack exchange，提问作者ThunderBird