上周我遇到了以下问题 - 我想不仅将我的 Ionic 项目编译为 android 版本,还想将其编译为 electron 桌面应用程序。但是,每次部署 packed electron 版本时,我都会出现白屏。
如何重现问题:
# 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
最佳答案
我已经能够在部署版本中获得可见窗口,在 ./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:`
],
},
});
});
}
关于ionic-framework - 使用 Ionic v5 和 @capacitor-community/electron 构建 Electron 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69418292/