使用带有@capacitor-community/electron 的 Ionic v5 构建 Electron 应用程序答案

【问题标题】：Build Electron app using Ionic v5 with @capacitor-community/electron使用带有@capacitor-community/electron 的 Ionic v5 构建 Electron 应用程序
【发布时间】：2021-10-02 23:24:10
【问题描述】：

上周我一直在解决以下问题 - 我想将我的 Ionic 项目不仅编译为 android 版本，还编译为电子桌面应用程序。但是，每次我部署打包的电子版时，都会出现白屏。

如何重现问题：

# i create simple angular app
ionic start example-app tabs --type angular 
cd example-app
# i add @capacitor-community version of electron, since the original electron is deprecated
npm i @capacitor-community/electron
# required to get a www folder
ionic build
# add electron folder to project
npx cap add @capacitor-community/electron
# now we work inside electron project...
cd electron
# we can build project
npm run build
# we can start live project
npm run electron:start-live
# and now we have crash - just a blank white window
npm run electron:pack

【问题讨论】：

标签： ionic-framework electron capacitor electron-builder ionic5

【解决方案1】：

我已经能够在部署版本中获得可见窗口，在 ./electron/src/setup.ts 文件中进行以下更改。您需要找到以下片段：

// Set a CSP up for our application based on the custom scheme
export function setupContentSecurityPolicy(customScheme: string): void {
  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
          electronIsDev
            ? `default-src ${customScheme}://* 'unsafe-inline' devtools://* 'unsafe-eval' data:`
            : `default-src ${customScheme}://* 'unsafe-inline' data:`,
        ],
      },
    });
  });
}

并将其更改为：

// Set a CSP up for our application based on the custom scheme
export function setupContentSecurityPolicy(customScheme: string): void {
  session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
    callback({
      responseHeaders: {
        ...details.responseHeaders,
        'Content-Security-Policy': [
             `default-src ${customScheme}://* 'unsafe-inline' devtools://* 'unsafe-eval' data:`
        ],
      },
    });
  });
}

【讨论】：