Electron+Angular应用控制台报net::ERR_FILE_NOT_FOUND错误求助

我帮你定位到问题核心了：这是Angular打包生成的base href配置和Electron的本地文件协议（file://）不兼容导致的。

问题原因分析 #

当你用ng serve运行时，Angular处于web服务器环境，<base href="/">表示根路径是服务器根目录，资源加载完全正常。但Electron是直接加载本地文件，此时<base href="/">会指向你的系统根目录（比如C:/），而非项目的dist文件夹，所以才会出现net::ERR_FILE_NOT_FOUND错误——它跑去系统根目录找polyfills.bundle.js这些文件，自然找不到。

从你的文件内容也能印证这一点：

• 你src目录下的index.html设置的是<base href="./">（相对路径），但打包后dist目录下的index.html被自动改成了<base href="/">（绝对路径），这是Angular默认打包的行为。

解决方案 #

这里有两种可行的解决办法：

1. 打包时指定相对路径（推荐）

在执行Angular打包命令时，加上--base-href ./参数，让打包工具直接生成适配本地文件的相对路径配置：

# 生产环境打包
ng build --prod --base-href ./

# 开发环境打包
ng build --base-href ./

执行这个命令后，dist/index.html里的<base href="/">会自动变成<base href="./">，所有资源引用都会以dist文件夹为基准，Electron就能正确加载了。

2. 手动修改已打包的index.html（临时应急）

如果已经完成打包不想重新跑命令，可以直接编辑dist/index.html，把：

<base href="/">

改成：

<base href="./">

保存后重新用Electron加载dist/index.html，资源就能正常找到了。

额外验证 #

修改完成后，你可以检查dist/index.html里的js、css引用路径，比如src="inline.9c6676de3e2948b5be6b.bundle.js"这种不带斜杠的相对路径，同时favicon的错误也会跟着解决——它会指向dist文件夹下的favicon.ico，而不是系统根目录的C:/favicon.ico。

内容的提问来源于stack exchange，提问作者junaid