本文详解 Electron-Vite 项目中 secondary BrowserWindow 加载 video.html 等非主入口 HTML 文件时出现 “Not allowed to load local resource” 错误的根本原因，并提供基于 build.rollupOptions.input 的标准化解决方案，确保开发与生产环境一致生效。
本文详解 electron-vite 项目中 secondary browserwindow 加载 `video.html` 等非主入口 html 文件时出现 “not allowed to load local resource” 错误的根本原因，并提供基于 `build.rollupoptions.input` 的标准化解决方案，确保开发与生产环境一致生效。
在 Electron-Vite + React（或 Vue）项目中，开发者常误以为只要 loadFile() 指向正确的路径就能成功加载任意 HTML 文件——但实际在生产构建后，video.html 极大概率无法被加载，并报错：
Not allowed to load local resource: file:///.../video.html
该错误并非路径写错或权限问题，而是 Vite 构建机制导致的资源缺失：默认情况下，Vite 仅将 index.html 作为入口进行构建和产物输出；其他 HTML 文件（如 video.html）虽存在于源码中，却不会被自动编译、注入脚本、生成对应 JS/CSS 资源，也不会被复制到最终 dist/renderer/ 输出目录下。因此，secondWindow.loadFile(.../video.html) 在生产环境中实际加载的是一个“空壳 HTML”，且其引用的 <script type="module" src="/assets/video.xxx.js"></script> 根本不存在，Chromium 直接拒绝加载。
✅ 正确解法是显式声明多入口 —— 通过 vite.config.ts（或 .js）中的 build.rollupOptions.input 配置，告诉 Vite：video.html 同样是一个独立的构建入口：
// electron.vite.config.js
import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
main: {
plugins: [externalizeDepsPlugin()]
},
preload: {
plugins: [externalizeDepsPlugin()]
},
renderer: {
build: {
rollupOptions: {
// ✅ 关键配置：显式注册 video.html 为独立入口
input: {
index: resolve(__dirname, 'src/renderer/index.html'),
video: resolve(__dirname, 'src/renderer/video.html') // ← 必须与文件路径严格一致
}
}
},
resolve: {
alias: {
'@renderer': resolve('src/renderer/src')
}
},
plugins: [react()]
}
})
配置生效后，Vite 将为 video.html 单独执行构建流程：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 自动注入
video.jsx编译后的模块化脚本（如/assets/video.xxxxxx.js）； - 正确处理其内部的
import、CSS、静态资源引用； - 将完整产物（HTML + JS + CSS + assets）输出至
dist/renderer/，与index.html平级。
此时 secondWindow.loadFile(join(__dirname, '../renderer/video.html')) 才能真正加载一个「功能完备」的页面。
⚠️ 注意事项：
-
路径必须绝对且精确：
resolve(__dirname, ...)是安全写法；避免相对路径或拼接错误； -
文件名需与 HTML 文件名一致（如
video.html→input.video），否则 Vite 不识别； -
loadFile()路径指向构建后位置：生产环境应为join(__dirname, '../renderer/video.html')（即dist/renderer/video.html），而非源码路径； - 若使用
loadURL()，需确保开发环境ELECTRON_RENDERER_URL服务也已托管video.html（如 Vite 开发服务器默认不支持多 HTML 入口路由，建议生产用loadFile，开发保持loadURL+ 多入口配置兼容）； -
IPC 通信不受影响：
ipcRenderer和ipcMain仍可正常工作，但需确保video.html对应的渲染进程脚本（video.jsx）中已正确初始化ipcRenderer监听逻辑（如ipcRenderer.on('start-video', ...)）。
? 补充验证技巧：
构建完成后，检查 dist/renderer/ 目录是否包含：
dist/renderer/ ├── index.html ├── video.html ← 存在 ├── assets/ │ ├── index.xxxxxx.js │ └── video.xxxxxx.js ← 存在且被 video.html 正确引用
若缺失 video.html 或其 JS 资源，则说明 Vite 入口配置未生效，需检查路径、拼写及配置文件是否被正确加载。
总结：Electron 多窗口白屏/资源加载失败，90% 源于构建工具未识别非主入口 HTML。以 rollupOptions.input 显式声明多入口，是 Electron-Vite 项目实现多 HTML 页面交付的标准化、可靠方案。 不依赖降级 webSecurity: false、不修改 file:// 协议策略、不引入 HTTP 服务——纯粹、安全、跨平台。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
