Electron问题总会

这篇内容是在有道云旧笔记基础上重新整理的 Vue/Vite 工程实践 笔记。原始记录偏碎片化，这里补充了使用场景、阅读顺序和落地时需要注意的边界，方便以后在项目里快速复用。

适用场景 ​

• Vue/Vite 项目中遇到配置、组件封装、构建或运行时问题时，作为排查入口。
• 需要把一次性调试经验沉淀成团队内可复用的前端工程实践。
• 迁移旧项目或升级依赖时，用来对照检查环境变量、插件和组件行为差异。

核心要点 ​

• 正文已经按 「Electron ABI 版本对照表」、「&x20;问题解答」、「&x20;==The process cannot access the file because it is being used by another process.==」、「&x20;==d3dcompiler\47.dll: Access is denied.==」 等小节组织，阅读时可以先定位到当前问题对应的小节。
• 保留了 15 段可直接参考的代码或命令，主要涉及 bash、javascript，复制前需要按当前项目路径、版本和变量名做调整。
• 涉及命令行操作时，建议先在测试目录或测试环境执行，确认输出符合预期后再应用到生产环境。

pnpm install electron vite-plugin-electron vite-plugin-electron-renderer electron-builder -D

Electron ABI 版本对照表 ​

https://releases.electronjs.org/

问题解答 ​

==The process cannot access the file because it is being used by another process.== ​

• [x] 一般是应为当前项目被编辑器打开某个进程或者文件被占用

 ⨯ remove F:\**\vvvvv\release\win-unpacked\resources\app.asar: The process cannot access the file because it is being used by another process.
github.com/develar/go-fs-util.EnsureEmptyDir
        /Volumes/data/go/pkg/mod/github.com/develar/go-fs-util@v0.0.0-20190620175131-69a2d4542206/fs.go:98
github.com/develar/app-builder/pkg/electron.UnpackElectron.func1.1
        /Volumes/data/Documents/app-builder/pkg/electron/electronUnpack.go:38
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
        /Volumes/data/Documents/app-builder/pkg/util/async.go:68
runtime.goexit
        /usr/local/Cellar/go/1.17/libexec/src/runtime/asm_amd64.s:1581
  ⨯ F:\lancema\study\vvf3\node_modules\.pnpm\app-builder-bin@4.0.0\node_modules\app-builder-bin\win\x64\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code:

==d3dcompiler_47.dll: Access is denied.== ​

• [x] 一般是编译成功的软件进程未被关闭，进程被占用

 ⨯ remove F:\**\vvvvv\release\win-unpacked\d3dcompiler_47.dll: Access is denied.
github.com/develar/go-fs-util.EnsureEmptyDir
        /Volumes/data/go/pkg/mod/github.com/develar/go-fs-util@v0.0.0-20190620175131-69a2d4542206/fs.go:98
github.com/develar/app-builder/pkg/electron.UnpackElectron.func1.1
        /Volumes/data/Documents/app-builder/pkg/electron/electronUnpack.go:38
github.com/develar/app-builder/pkg/util.MapAsyncConcurrency.func2
        /Volumes/data/Documents/app-builder/pkg/util/async.go:68
runtime.goexit
        /usr/local/Cellar/go/1.17/libexec/src/runtime/asm_amd64.s:1581
  ⨯ F:\lancema\study\vvf3\node_modules\.pnpm\app-builder-bin@4.0.0\node_modules\app-builder-bin\win\x64\app-builder.exe process failed ERR_ELECTRON_BUILDER_CANNOT_EXECUTE
Exit code:

==Electron Security Warning (Insecure Content-Security-Policy)== ​

• [x] 应该是加载了http协议的地址（如果生产加载的是编译文件或者https协议地址可忽略）

VM4 sandbox_bundle:2 Electron Security Warning (Insecure Content-Security-Policy) This renderer process has either no Content Security
  Policy set or a policy with "unsafe-eval" enabled. This exposes users of
  this app to unnecessary security risks.

For more information and help, consult
https://electronjs.org/docs/tutorial/security.
This warning will not show up
once the app is packaged.

==如果使用Vue 项目vue-router 历史模式建议使用Hash 模式如果是WEB项目有的使用了HTML5 模式（但是它需要在服务端做反向代理==） ​

==A JavaScript error occurred in the main processlJncaught Exception:E rror: Cannot find module 'xxxxx'Req 如果在开发模式正常编译打包后打开软件后出现，应该是【electron-builder】在打包出现问题不知道是设置的问题还是其它问题，目前的解决方法是按照提示错误依次在devDependencies中安装依赖库== ​

A JavaScript error occurred in the main processlJncaught Exception:E rror: Cannot find module '@serialport/parser-byte-length'Req u i re stack:F:\Iancema\study\vvf3\reIease\win-unpacked\resources\app.asar\node mod...\indexjsat M0duIe. resolvefilename (node:internal/modules/cjs/loader:11 51 ： 1 5 ）at s. resolvefilename (node:eIectron/js2c/browser init:2:1 20278 ）at M0duIe. load (n0de:internaI/m0dules/cjs/loader:992:27)at c. load (node:eIectron/js2c/node init:2:1 3672 ）at M0duIe.require (node:internal/modules/cjs/loader:1242 ： 1 9 ）at req u i re (node:internal/modules/helpers:176 ： 1 8 ）at Object.<anonymous>

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again ​

D:\lancema\studies\electron-spider\node_modules\.pnpm\electron@33.4.4\node_modules\electron\index.js:17
    throw new Error('Electron failed to install correctly, please delete node_modules/electron and try installing again');
          ^

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again
    at getElectronPath (D:\lancema\studies\electron-spider\node_modules\.pnpm\electron@33.4.4\node_modules\electron\index.js:17:11)
    at Object.<anonymous> (D:\lancema\studies\electron-spider\node_modules\.pnpm\electron@33.4.4\node_modules\electron\index.js:21:18)
    at Module._compile (node:internal/modules/cjs/loader:1734:14)
    at Object..js (node:internal/modules/cjs/loader:1899:10)
    at Module.load (node:internal/modules/cjs/loader:1469:32)
    at Function._load (node:internal/modules/cjs/loader:1286:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:235:24)
    at cjsLoader (node:internal/modules/esm/translators:311:5)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:204:7)

Node.js v23.8.0
 ELIFECYCLE  Command failed with exit code 1.


进入到node_modules\electron 目录后，
执行 node install.js

Error: Could not locate the bindings file. Tried: ​

Error: Could not locate the bindings file. Tried:
 → D:\lancema\studies\electron-vite-vue\electron-spider\node_modules\.pnpm\better-sqlite3@11.9.1\node_modules\better-sqlite3\build\better_sqlite3.node
 → D:\lancema\studies\electron-vite-vue\electron-spider\node_modules\.pnpm\better-sqlite3@11.9.1\node_modules\better-sqlite3\build\Debug\better_sqlite3.node
 → D:\lancema\studies\electron-vite-vue\electron-spider\node_modules\.pnpm\better-sqlite3@11.9.1\node_modules\better-sqlite3\build\Release\better_sqlite3.node
 → D:\lancema\studies\electron-vite-vue\electron-spider\node_modules\.pnpm\better-sqlite3@11.9.1\node_modules\better-sqlite3\out\Debug\better_sqlite3.node
 → D:\lancema\studies\electron-vite-vue\electron-spider\node_modules\.pnpm\better-sqlite3@11.9.1\node_modules\better-sqlite3\Debug\better_sqlite3.node
 → D:\lancema\studies\electron-vite-vue\electron-spider\node_modules\.pnpm\better-sqlite3@11.9.1\node_modules\better-sqlite3\out\Release\better_sqlite3.node
 → D:\lancema\studies\electron-vite-vue\electron-spider\node_modules\.pnpm\better-sqlite3@11.9.1\node_modules\better-sqlite3\Release\better_sqlite3.node
 → D:\lancema\studies\electron-vite-vue\electron-spider\node_modules\.pnpm\better-sqlite3@11.9.1\node_modules\better-sqlite3\build\default\better_sqlite3.node

==================================================================================
因为electron是嵌入 Chromium 和 Node.js 到 二进制，直接安装的better-sqlite3是无法直接在electron中运行的，需要重新构建，使用@electron/rebuild依赖重新构建即可，执行以下命令：

# 执行重构命令
.\node_modules\.bin\electron-rebuild -f -w better-sqlite3

2、脚本配置

"rebuild": "electron-rebuild -f -w better-sqlite3"

在package.json的scripts内添加上面脚本

3、执行该脚本，提示“Rebuild Complete”

至此，就可以正常使用better-sqlite3

总结：

1、better-sqlite3的安装需要提前先安装好一些构建工具：python和c++ 桌面开发。可以手动安装，也可以用windows-build-tools自动安装。反正我觉得windows-build-tools挺坑。至于还缺不缺少其他，此次better-sqlite3的安装使用并没有提示，有坑再填吧。

2、better-sqlite3需要保证项目Node版本和Electron的ABI（NODE_MODULE_VERSION)一致。在不更改项目node版本的情况下，可以用electron-rebuild 来重建 Electron 项目中本地 Node.js 模块的。

实践检查清单 ​

• 先确认 Vue、Vite、Node、包管理器版本，再判断示例是否需要按当前工程结构调整。
• 涉及构建或插件配置时，建议同时验证开发环境和生产构建结果。
• 涉及 UI 或浏览器行为时，至少在桌面端和移动端各验证一次关键路径。
• 涉及接口、服务端或权限逻辑时，补充失败分支和权限边界测试。

复盘小结 ​

这篇笔记更适合作为问题排查或方案落地前的速查材料。后续如果在真实项目中再次遇到同类问题，可以继续把具体版本、报错信息、最终取舍和验证结果补到对应小节里，让它从代码片段逐步沉淀成完整方案。