ERR_FILE_NOT_FOUND 说明 浏览器根本找不到这两个文件，90 % 是因为：

1. 你把 swagger-ui-dist 打进了 asar 包，而 file:// 协议下 Chromium 禁止读取 asar 内的静态资源；
2. 或者路径拼错 / 文件名大小写不一致。

一、让 electron-builder 把资源放到 app 外（推荐）

1. 安装依赖（只当普通资源，不打包）

npm i -D swagger-ui-dist

1. electron-builder.yml 新增一条 extraResources

extraResources:  - from: node_modules/swagger-ui-dist    to: swagger-ui-dist

1. 构建后会得到目录结构

dist/mac/YourApp.app/Contents/Resources/swagger-ui-dist/├─ swagger-ui.css├─ swagger-ui-bundle.js└─ ...

二、在代码里生成绝对 file:// URL

import path from 'path';import { app } from 'electron';const SWAGGER_DIR = path.join(app.getAppPath(), '..', 'swagger-ui-dist'); // asar 外const SWAGGER_CSS = `file://${path.join(SWAGGER_DIR, 'swagger-ui.css')}`;const SWAGGER_BUNDLE = `file://${path.join(SWAGGER_DIR, 'swagger-ui-bundle.js')}`;

---

四、Windows 兼容写法（三段式 file:///）

function fileUrl(p: string) {  const url = path.resolve(p).replace(/\\/g, '/');  return `file:///${url}`;}const SWAGGER_CSS = fileUrl(path.join(SWAGGER_DIR, 'swagger-ui.css'));const SWAGGER_BUNDLE = fileUrl(path.join(SWAGGER_DIR, 'swagger-ui-bundle.js'));

---

控制台不再报 ERR_FILE_NOT_FOUND，document.querySelector('.swagger-ui') 也能正常拿到节点。

---

现象

路径对了仍 404

作为 extraResources 后 dev 模式找不到

想保持 asar 内加载

30 秒复盘

1. electron-builder.yml 里 extraResources 把 swagger-ui-dist 放到 app 外。
2. 代码里用 file://${app.getAppPath()}/../swagger-ui-dist/xxx 拼绝对 URL。
3. Windows 把反斜杠转 / 并加 file:///。

按上面改完，两个静态文件 200 成功，页面即能正常渲染，祝调试顺利!

顶一下()     踩一下()