在 Mac 中打开 Electron 应用程序时出错："file:///Applications/../Contents/Resources/app.asar/dist/index.html"

Question

我已经为 mac 构建了电子应用程序，但是当我运行它时，它给出了以下错误

"Not allowed to load local resource: file:///Applications/e-admin.app/Contents/Resources/app.asar/dist/index.html".

这是我执行的步骤。

1) electron-builder build --mac 它创建了以下文件是 dist 文件夹。 a) e-admin-0.0.0.dmg , e-admin-0.0.0-mac.zip,index.html 和一个 mac 文件夹 b) 在 mac 文件夹中我可以看到 mac/e-admin.app/Contents/Resources/app.asar 文件（不是文件夹）

2) 我双击并安装了 e-admin-0.0.0.dmg 并移动到应用程序文件夹。 3) 打开应用程序。

我是否必须对 app.asar 文件做任何事情？（解压缩或其他事情？）或任何其他程序才能使其工作？

我的package.json

{
  "name": "e-admin",
  "version": "0.0.0",
  "scripts": {
    "postinstall": "electron-builder install-app-deps",
    "ng": "ng",
    "start": "npm-run-all -p electron:serve ng:serve",
    "build": "npm run electron:serve-tsc && ng build",
    "build:dev": "npm run build -- -c dev",
    "build:prod": "npm run build -- -c production",
    "ng:serve": "ng serve",
    "ng:serve:web": "ng serve -c web -o",
    "electron:serve-tsc": "tsc -p tsconfig-serve.json",
    "electron:serve": "wait-on http-get://localhost:4200/ && npm run electron:serve-tsc && electron . --serve",
    "electron:local": "npm run build:prod && electron .",
    "electron:linux": "npm run build:prod && electron-builder build --linux",
    "electron:windows": "npm run build:prod && electron-builder build --windows",
    "electron:mac": "npm run build:prod && electron-builder build --mac",
    "test": "ng test",
    "e2e": "npm run build:prod && cross-env TS_NODE_PROJECT='e2e/tsconfig.e2e.json' mocha --timeout 300000 --require ts-node/register e2e/**/*.e2e.ts",
    "version": "conventional-changelog -i CHANGELOG.md -s -r 0 && git add CHANGELOG.md",
    "lint": "ng lint"
  },
  "main": "main.js",
  "private": true,
  "dependencies": {...}

和angular.josn文件

"projects": {
    "eAdmin": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
....

main.ts 包含

if (serve) {
    require('electron-reload')(__dirname, {
      electron: require(`${__dirname}/node_modules/electron`)
    });
    win.loadURL('http://localhost:4200');
  } else {
    win.loadURL(url.format({
      pathname: path.join(__dirname, 'dist/index.html'),
      protocol: 'file:',
      slashes: true
    }));
  }

Answer 1

经过多次尝试和错误，以下更改对我有效

1) index.html

`<base href="/">`

至

<base href="./">

2) 在 main.ts 中，将目录名称 dist 更改为其他名称

来自 :

win.loadURL(url.format({
  pathname: path.join(__dirname, 'dist/index.html'),     
  protocol: 'file:',
  slashes: true
}));

收件人：

win.loadURL(url.format({
  pathname: path.join(__dirname, 'angular_build/index.html'),     
  protocol: 'file:',
  slashes: true
}));

3) Angular.js

"outputPath": "dist/",

至

"outputPath": "angular_build/",

虽然我看到了更改步骤 2 和 3 的建议，但我还是持怀疑态度。看起来 dist directlory 某些方法不起作用，必须更改为上面提到的某些东西

在 Mac 中打开 Electron 应用程序时出错："file:///Applications/../Contents/Resources/app.asar/dist/index.html"

Error in Opening Electron App in Mac:"file:///Applications/../Contents/Resources/app.asar/dist/index.html"

macos

electron

electron-builder