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

Posted 2023-03-22

【中文标题】在 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"

【发布时间】：2020-06-01 14:37:17

【问题描述】：

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

“不允许加载本地资源：file:///Applications/e-admin.app/Contents/Resources/app.asar/dist/index.html”。

这是我做的步骤。

1) 电子生成器构建 --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
    ));
  

【参考方案1】：

经过多次反复试验，以下更改对我有用

1) 索引.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 目录有些不起作用，必须更改为如上所述的内容