Ionic4启动屏设置方法及迁移后Cordova图标异常问题解决

刚把Ionic3的resources文件夹直接复制到Ionic4项目就出这问题？太正常了，我之前迁移的时候也踩过这个坑，给你拆解原因和解决步骤：

为啥会显示Cordova默认图标？ #

主要是这几个核心原因：

• 资源结构不兼容：Ionic4的resources文件夹和Ionic3的组织逻辑不一样，直接复制旧资源，Ionic和Cordova根本识别不了你的自定义启动屏文件。
• 未重新生成适配资源：旧的Ionic3资源是针对旧平台版本生成的，Ionic4需要重新生成适配当前平台的启动屏/图标文件，不然Cordova找不到指定资源就会 fallback 到默认图标。
• 插件配置或版本差异：Ionic4使用的cordova-plugin-splashscreen版本通常比Ionic3的新，配置项或者资源路径要求有变化，旧配置不生效就会导致加载失败。

手把手教你修改Ionic4启动屏 #

1. 先整理资源文件夹结构 #

删掉复制过来的旧android、ios子文件夹，只保留通用的高分辨率原图：

• 准备一张splash.png（推荐尺寸2732×2732的正方形图，Ionic会自动裁剪适配各种屏幕比例和分辨率）
• 准备一张icon.png（推荐尺寸1024×1024）

整理后的resources文件夹结构应该是这样：

resources/
├── splash.png
└── icon.png

2. 重新生成平台专属资源 #

在项目根目录执行以下命令，Ionic会自动为你生成对应平台的适配启动屏和图标：

ionic cordova resources

如果只想单独生成启动屏，可执行：

ionic cordova resources splash

划重点：执行命令前要确保已经添加了目标平台，比如ionic cordova platform add android或ionic cordova platform add ios，否则资源无法生成到对应平台目录。

3. 检查启动屏插件和配置 #

首先确认安装了最新版的启动屏插件：

ionic cordova plugin add cordova-plugin-splashscreen@latest
npm install @ionic-native/splash-screen

然后打开config.xml，检查启动屏的配置是否正确，比如Android平台的示例配置：

<preference name="SplashScreenDelay" value="3000" /> <!-- 启动屏显示时长，单位毫秒 -->
<preference name="SplashMaintainAspectRatio" value="true" /> <!-- 保持启动屏比例，避免拉伸 -->
<platform name="android">
    <splash src="resources/android/splash/drawable-land-mdpi-screen.png" density="land-mdpi" />
    <splash src="resources/android/splash/drawable-land-hdpi-screen.png" density="land-hdpi" />
    <!-- 其他分辨率的splash配置会由Ionic自动生成，无需手动添加 -->
</platform>

如果这里的src路径错误，会导致加载不到自定义资源，从而显示Cordova默认图标。

4. 清理缓存并重新构建项目 #

旧的构建缓存可能会导致资源不更新，执行以下命令清理后重新构建：

ionic cordova clean android  # 换成ios就是清理iOS平台缓存
ionic cordova build android

额外注意事项 #

• iOS平台需注意：Ionic4默认使用Launch Storyboard，如果之前Ionic3用的是旧的Launch Image，可能需要打开Xcode手动调整配置，确保选中正确的启动屏文件。
• 启动屏原图一定要用高分辨率正方形图，否则裁剪后的启动屏会出现模糊、拉伸问题。

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