You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Ionic 6+Capacitor项目缺失resources文件夹,如何更换应用图标与启动屏?

解决Ionic 6+Capacitor无resources文件夹下更换Icon和启动页的问题

方法一:使用官方工具自动生成(推荐)

Capacitor官方推荐用@capacitor/assets工具统一管理图标和启动页资源,无需手动搭建复杂目录:

  1. 安装依赖
    在项目根目录执行命令:
npm install @capacitor/assets --save-dev
  1. 准备基础资源
    在项目根目录新建resources文件夹,放入两张标准尺寸的基础图片:
  • 图标:1024x1024的PNG图片,命名为icon.png
  • 启动页:2732x2732的PNG图片,命名为splash.png
    (如需Android自适应图标,额外准备432x432的前景图icon-foreground.png和1024x1024的背景图icon-background.png)
  1. 配置资源路径
    修改项目根目录的capacitor.config.ts(或capacitor.config.json),添加资源配置:
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '你的应用ID',
  appName: '你的应用名称',
  webDir: 'www',
  bundledWebRuntime: false,
  assets: {
    android: {
      iconPath: 'resources/icon.png',
      splashPath: 'resources/splash.png',
      adaptiveIcon: {
        foregroundPath: 'resources/icon-foreground.png',
        backgroundPath: 'resources/icon-background.png'
      }
    },
    ios: {
      iconPath: 'resources/icon.png',
      splashPath: 'resources/splash.png'
    }
  }
};

export default config;

若为JSON格式配置文件,对应调整为JSON结构即可。

  1. 生成并同步资源
    执行命令生成各平台所需的全尺寸资源,并同步到原生项目:
npx capacitor-assets generate
npx cap sync

方法二:手动替换原生项目资源

如果不想依赖工具,可直接修改iOS/Android原生项目的资源文件:

  • Android:打开项目根目录下的android文件夹,进入app/src/main/res,替换对应分辨率文件夹(如mipmap-hdpi、drawable-land-mdpi等)里的图标和启动图文件。
  • iOS:打开项目根目录下的ios文件夹,用Xcode打开App.xcworkspace,找到Images.xcassets,替换AppIcon和LaunchImage中的对应图片。

内容的提问来源于stack exchange,提问作者Mohamed Lamine Koné

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.19 15:45:41