ERR_FILE_NOT_FOUND 说明 浏览器根本找不到这两个文件，90 % 是由于：
- 你把 swagger-ui-dist 打进了 asar 包，而 file:// 协议下 Chromium 禁止读取 asar 内的静态资源；
- 或者路径拼错 / 文件名大小写不一致。
下面给一套「asar 外 + 绝对路径」的 3 分钟修复方案，保证 file:// 能正常加载。
一、让 electron-builder 把资源放到 app 外（推荐）
- 安装依赖（只当普通资源，不打包）
npm i -D swagger-ui-dist- electron-builder.yml 新增一条 extraResources
extraResources:
- from: node_modules/swagger-ui-dist
to: swagger-ui-dist- 构建后会得到目录结构
dist/mac/YourApp.app/Contents/Resources/swagger-ui-dist/
├─ swagger-ui.css
├─ swagger-ui-bundle.js
└─ ...Windows 在 resourcesswagger-ui-dist；Linux 同理。
二、在代码里生成绝对 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')}`;三、生成 HTML（用上面的绝对 URL）
const html = `
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<link rel="stylesheet" href="${SWAGGER_CSS}"/>
</head>
<body>
<div id="swagger-ui"></div>
<script src="${SWAGGER_BUNDLE}"></script>
<script>
SwaggerUIBundle({ spec: ${JSON.stringify(swaggerJson)}, dom_id: '#swagger-ui' });
</script>
</body>
</html>`;四、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'));五、再跑一遍 → 网络面板应显示 200
file:///Users/.../YourApp.app/Contents/Resources/swagger-ui-dist/swagger-ui.css 200
file:///Users/.../YourApp.app/Contents/Resources/swagger-ui-dist/swagger-ui-bundle.js 200控制台不再报 ERR_FILE_NOT_FOUND，document.querySelector('.swagger-ui') 也能正常拿到节点。
六、常见额外坑
|
现象 |
解决 |
|
路径对了仍 404 |
确认 大小写（Linux 严格） |
|
作为 extraResources 后 dev 模式找不到 |
dev 时手动把 swagger-ui-dist 拷到 out/ 或判断 app.isPackaged 走不同路径 |
|
想保持 asar 内加载 |
必须改用 自定义协议（ |
30 秒复盘
- electron-builder.yml 里 extraResources 把 swagger-ui-dist 放到 app 外。
- 代码里用 file://${app.getAppPath()}/../swagger-ui-dist/xxx 拼绝对 URL。
- Windows 把反斜杠转 / 并加 file:///。
按上面改完，两个静态文件 200 成功，页面即能正常渲染，祝调试顺利!
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
暂无评论...
