使用Ionic v5搭配@capacitor-community/electron构建Electron应用打包白屏问题

1. 修正Angular路由策略（最高概率解决） #

Ionic Angular默认使用无Hash的PathLocation路由模式，Electron打包后以file协议加载本地静态资源时，无法匹配该模式下的路由规则，是白屏的最常见诱因。
修改src/app/app-routing.module.ts文件：

// 顶部导入对应模块
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  // 新增providers配置，替换路由策略
  providers: [{ provide: LocationStrategy, useClass: HashLocationStrategy }]
})
export class AppRoutingModule { }

2. 校验Capacitor全局配置 #

打开项目根目录下的capacitor.config.ts（或json格式配置文件），确认以下配置正确：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: '你的应用ID',
  appName: '你的应用名称',
  webDir: 'www', // 必须指向ionic build输出的资源目录
  server: {
    // 不要配置url字段，打包时会默认加载本地webDir的资源
  }
};

export default config;

3. 检查Electron窗口加载逻辑 #

如果修改路由后仍白屏，进入electron/src/index.ts，确认BrowserWindow创建时的加载路径配置正确，可临时开启控制台排查报错：

const mainWindow = new BrowserWindow({
  height: 600,
  width: 800,
  webPreferences: {
    contextIsolation: true,
    nodeIntegration: false,
  }
});

// 开发环境和生产环境区分加载逻辑
if (process.env.VITE_DEV_SERVER_URL) {
  mainWindow.loadURL(process.env.VITE_DEV_SERVER_URL);
  mainWindow.webContents.openDevTools();
} else {
  // 生产环境加载本地打包后的静态文件，路径不能写错
  mainWindow.loadFile(path.join(__dirname, '../app/index.html'));
  // 打包后也可以临时开控制台看报错，排查完再注释即可
  // mainWindow.webContents.openDevTools();
}

4. 执行正确的打包流程 #

每次修改Ionic代码后，都要按以下顺序执行命令，避免Electron端资源未更新导致白屏：

# 回到项目根目录，编译前端代码到www文件夹
ionic build
# 同步最新的www资源到Electron项目
npx cap sync @capacitor-community/electron
# 进入Electron目录打包
cd electron
npm run build
npm run electron:pack

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