Electron - 不允许加载本地资源 [英] Electron - Not allowed to load local resource

查看:134
本文介绍了Electron - 不允许加载本地资源的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

晚上,
我正在考虑使用 electron 来打包现有的 angular2 构建.我以为我进行了试运行,但实际包装似乎失败了(请参阅下面的最后一步),我想了解原因.这就是我在做什么...

Evening,
I'm looking into using electron to package an existing angular2 build. I thought I had a dry run working but the actual packaging seems to be failing (see final step below) and I want to understand why. Here's what I'm doing...

创建项目
使用 angular-cli 开始一个新项目 ng new electron-ng2-cli --style=scss

安装电子和electron-builder

编辑 package.json
添加以下内容...
"main": "main.js"

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

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

and add the following to the scripts...

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

创建 main.js
我刚刚从 电子快速入门.我所做的唯一更改是将 index.html 的位置设置为 /dist/index.html

Create main.js
I just copied the code from the electron quick start. The only change I make is to the location of index.html which I set to /dist/index.html

修改 base
index.html 中将 <base="/"> 更改为

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

Pack code
Run ng build. This puts all the packaged code in /dist

测试运行
运行npm run electron.这工作正常.一个 Electron 应用程序启动,我看到里面运行着 angular 的东西.

Test Run
Run npm run electron. This works fine. An Electron app fires up and I see the angular stuff running within it.

创建用于分发的应用
运行 npm run pack 以创建打包的应用.包装似乎没问题 - 我收到关于缺少图标的警告和我的代码未签名的警告,但我猜它们不应该是致命的?
问题是,当我现在通过双击 Finder 运行该应用程序时,我在控制台中收到一条错误消息:不允许加载本地资源:file:///Users/<用户名>/Documents/development/electron-ng2-cli/dist/mac/electron-ng2-cli.app/Contents/Resources/app.asar/dist/index.html<小时>那么,当我使用 npm run electron 时,任何人都可以解释失败的打包应用程序和运行正常的打包应用程序之间有什么不同吗?

Create App For Distribution
Run npm run pack to create a packaged app. The packaging seems to go ok - I get a warning about a missing icon and a warning that my code is unsigned but I'm guessing they shouldn't be fatal?
The problem is that when I now run the app by double clicking in Finder I get an error in the console saying: 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


So, can anyone explain what is different between the packaged app that fails and the one that runs ok when I use npm run electron?

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

What can I do to fix this issue and get the app running correctly?

感谢您坚持到最后.这比我想要的要长,但我希望我能解释清楚.如果您能提供帮助或提供任何指示,那就太好了 - 您的总体方向会考虑许多良好的共鸣 :)

Thank you for making it to the end. This got longer than I wanted but I hope I explained myself ok. If you can help or give any pointers that would be great - many good vibes will be thought in your general direction :)

大家加油

推荐答案

经过大量的反复试验,我终于成功了.这里有很多我不完全理解的东西,很多可能是毫无意义的或不好的做法,并且可能会在下一步全部失败,但是如果像我一样,你只是想克服第一个驼峰,那么也许我找到的东西会对你有所帮助.

It took a lot of trial and error but I got this working. There is a lot here that I don't totally understand, and much that might be pointless or bad practice and it might all fall down at the very next step but if, like me, you are just trying to get over the first hump then maybe something I found will help you.

我通过解压应用程序发现了问题electron-builder 生成的 .asar 文件.它没有包含我的 dist 文件夹中的捆绑代码,而是包含所有项目代码(*.ts *.scss 等).问题只是打包函数打包了错误的东西.
将正确的源放入最终应用程序的步骤很简单,但我的天哪,他们没有半途而废!从我在最初的问题中离开的地方开始,我做了以下...

I found the problem by unpacking the app.asar file that electron-builder produces. Instead of containing the bundled code from my dist folder it contained all the project code (*.ts *.scss etc). The problem was just that the packing functions were packing up the wrong stuff.
The steps to get the right source into the final app are simple when you lay them out but my god they didn't half put up a fight! Starting from where I left off in my initial question I did the following...

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

Electron 特定文件
我将 main.js 下移到 src 并将其名称更改为 electron-main.js 只是为了避免与已经存在的 main.ts 混淆.我还将它引用的路径改回 /index.html.
接下来我也在 src 中创建了一个新的应用程序级别 package.json> 并给它以下内容:

Electron specific files
I moved the main.js down into src and changed its name to electron-main.js just to stop any confusion with the main.ts that is already in there. I also changed the path it references back to /index.html.
Next I created a new application level package.json also in src and gave it the following content:

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

angular-cli.json
我将 outDir 更改为 build 纯粹是因为电子似乎输出到 dist 默认情况下,我想在这个阶段进行一些分离.然后我将 package.jsonelectron-main.js 添加到 assets 数组中.

angular-cli.json
I changed the outDir to build purely because electron seems to output to dist by default and I wanted some separation at this stage. Then I addded package.json and electron-main.js to the assets array.

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

Main package.json
I removed the "main":"main.js" as it is apparently no longer needed here. In scripts I changed the test command to electron build to point it at the build folder where the bundled code will be.
Finally, I went to the build field and added the following content:

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

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

Seems pretty obvious now. This just tells the compiler where to look for the assets that will make up the final app. It was defaulting to the working directory and that was my problem.

使用此设置,我现在可以运行 ng build 将我的项目与 electron-main.jspackage.json.
完成后,我可以运行 npm run electron 来快速启动测试应用程序或运行 npm run pack 来构建应用程序可以从 Finder 启动.

Using this setup I can now run ng build to bundle my project into the build folder along with the electron-main.js and package.json.
This done I can run npm run electron to quickly launch a test app or npm run pack to build an app that can be launched from Finder.

轰隆隆.任务完成.十分钟后我会带着另一个烦人的问题回到这里.这些天必须喜欢开发人员:)

Boom. Job done. I'll be back here in ten minutes with another annoying question I expect. Gotta love the dev these days :)

这篇关于Electron - 不允许加载本地资源的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆