电子 - 不允许加载本地资源

Question

晚上,
我正在研究使用电子来封装现有的angular2版本.我以为我干运行但实际包装似乎失败了(参见下面的最后一步),我想了解原因.这就是我正在做的......

创建项目
使用angular-cli启动新项目ng new electron-ng2-cli --style=scss

安装电子和电子建设者

编辑package.json
进行以下添加...
"main": "main.js"

"build":
{
  "appId": "com.electrontest.testapp",
  "mac": {
    "category": "your.app.category.type"
  }
}

并将以下内容添加到scripts...

"pack": "build --dir",
"dist": "build",
"electron": "electron main.js",
"postinstall": "install-app-deps"

创建main.js
我刚刚从电子快速入门复制了代码.我做的唯一改变是index.html我设置的位置/dist/index.html

修改基地
在index.html改变<base="/">到<base="./">

打包代码
运行ng build.这将所有打包的代码放入/dist

测试运行
运行npm run electron.这很好用.一个电子应用程序启动,我看到其中运行的角度内容.

为分发
运行创建应用程序npm run pack以创建打包应用程序.包装似乎没问题 - 我收到一个关于丢失图标的警告,并警告我的代码是无符号的,但我猜他们不应该是致命的？
问题是,当我现在通过双击运行应用程序时,Finder我在控制台中收到错误说:Not allowed to load local resource: file:///Users/<username>/Documents/development/electron-ng2-cli/dist/mac/electron-ng2-cli.app/Contents/Resources/app.asar/dist/index.html

---

那么,任何人都可以解释失败的打包应用程序与我使用时运行正常的应用程序之间的区别npm run electron吗？

我该怎么做才能解决此问题并使应用程序正常运行？

谢谢你让它到最后.这比我想要的要长,但我希望我解释得很好.如果你能提供帮助或给出任何可能很棒的指示 - 许多良好的共鸣将被认为是你的大方向:)

干杯全都

Answer 1

问题可能是无效路径main.js,必要时进行纠正

Answer 2

它花了很多试验和错误,但我得到了这个工作.这里有很多我不完全理解的东西,很多可能是毫无意义或不好的练习,它可能都会在下一步堕落但是如果和我一样,你只是试图克服第一个驼峰然后也许我找到的东西会帮助你.

我通过解app.asar压缩electron-builder生成的文件找到了问题.它不包含我的dist文件夹中的捆绑代码,而是包含所有项目代码(*.ts *.scss等).问题只在于包装功能正在收拾错误的东西.
当你把它们放到最后的应用程序时,获得正确的源代码的步骤很简单,但是我的上帝他们并没有半场打架!从我在最初的问题中离开的地方开始,我做了以下......

请记住,我的项目结构是angular-cli设置的默认项目结构

电子特定文件
我main.js向下移动src并更改其名称,electron-main.js以便停止与main.ts已存在的混淆.我也改变了它引用的路径/index.html.
接下来,我还创建了一个新的应用程序级别package.json,src并为其提供了以下内容:

 {
  "name": "application-name",
  "description": "CLI app",
  "author": "Me me me",
  "version": "0.0.1",
  "main": "electron-main.js"
}

angular-cli.json
我把它outDir改为build纯粹因为电子似乎dist默认输出到了我想要在这个阶段进行一些分离.然后我addded package.json和electron-main.js至assets阵列.

主package.json
我删除了,"main":"main.js"因为这里显然不再需要了.在scripts我更改测试命令以electron build将其指向捆绑代码所在的构建文件夹.
最后,我去了build现场并添加了以下内容:

"directories": {
  "buildResources": "build",
  "app": "build"
}

现在看来非常明显.这只是告诉编译器在哪里查找构成最终应用程序的资产.它是默认的工作目录,这是我的问题.

使用此设置,我现在可以运行ng build将我的项目build与electron-main.js和package.json.一起捆绑到文件夹中.
这样我就可以运行npm run electron以快速启动测试应用程序或npm run pack构建可以从中启动的应用程序Finder.

繁荣.任务完成.我将在十分钟内带着另一个令人讨厌的问题回到这里.这些天得爱开发:)

Answer 3

只需更改 BrowserWindow' 选项： new BrowserWindow({ webPreferences: { webSecurity: false } }) 如果窗口的 url 指向远程源，如 http://...，则浏览器将不允许加载本地资源，除非您设置上述选项。

Answer 4

万一这对任何人都有帮助，我遇到的问题是我使用process.cwd（）设置了路径：

win.loadURL(`file://${process.cwd()}/dist/index.html`);

打包时哪个不正确，因为main.js文件不再位于根目录中。更改为__dirname：

win.loadURL(`file://${__dirname}/dist/index.html`);

为我解决了此问题。

Answer 5

我有同样的问题，我的错误是win.loadURL不正确（loadURL 试图加载一个不存在的文件）。确保您的网址正确，否则您将收到错误消息。