Ionic 6+Capacitor项目缺失resources文件夹,如何更换应用图标与启动屏?
解决Ionic 6+Capacitor无resources文件夹下更换Icon和启动页的问题
方法一:使用官方工具自动生成(推荐)
Capacitor官方推荐用@capacitor/assets工具统一管理图标和启动页资源,无需手动搭建复杂目录:
- 安装依赖
在项目根目录执行命令:
npm install @capacitor/assets --save-dev
- 准备基础资源
在项目根目录新建resources文件夹,放入两张标准尺寸的基础图片:
- 图标:1024x1024的PNG图片,命名为
icon.png - 启动页:2732x2732的PNG图片,命名为
splash.png
(如需Android自适应图标,额外准备432x432的前景图icon-foreground.png和1024x1024的背景图icon-background.png)
- 配置资源路径
修改项目根目录的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结构即可。
- 生成并同步资源
执行命令生成各平台所需的全尺寸资源,并同步到原生项目:
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é
相关产品推荐
相关产品推荐

