且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

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

更新时间:2022-11-16 22:59:24

进行了很多次尝试和错误,但是我可以正常工作.这里有很多我不完全理解的东西,很多东西可能是毫无意义的或不好的做法,它们可能会在接下来的步骤中全部消失,但是如果像我一样,您只是想克服第一个障碍,那么也许我发现的东西会对您有所帮助.

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.

我通过解压缩 app.asar文件找到了问题electron-builder产生的.而不是包含我的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设置的默认结构

电子特定文件
我将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文件夹.
最后,我进入了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捆绑到build文件夹中.
完成此操作后,我可以运行npm run electron来快速启动测试. app或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 :)