关于electron的问题汇总

说明：
问题出现于以下版本（后面还新增了其他版本报错，报错不局限于版本，参考解决即可）
node：v16.20.1
vue：^3.2.13
electron：^25.3.1
electron-builder：^2.1.1

1. 第一次打包很慢，要下载electron

自动下载很慢，我们手动下载，打开地址： https://registry.npmmirror.com/binary.html?path=electron/，找到对应的electron版本，然后再找到类似 electron-v20.1.1-win32-x64.zip 的点击下载，放到 C:\Users\Jalon\AppData\Local\electron\Cache 下面即可（不用解压）

2. electron-builder打包慢出错的问题

由于网络原因，在进行builder打包时，可能会等很长时间，直到最后还是以失败告终。
如果是第一次进行builder打包，会去下载winCodeSign、nsis、nsis-resources，往往都是第一个就卡住了。
解决：
下载上面三个资源包时，会在控制台打印出对应的地址，我们可以复制地址，自己去手动下载，也可以通过https://github.com/electron-userland/electron-builder-binaries/releases，去自己找对应的资源，可以用某些下载软件下载会快一些，解压后然后将它们放到C:\Users\这个是你当前的电脑用户文件夹\AppData\Local\electron-builder\Cache下（在用户文件夹中找不到appdata文件夹，需要自己手动在地址栏后面加上\appdata），注意存放路径格式如下（所需的版本号可能不一样）

C:\Users\这个是你当前的电脑用户文件夹\AppData\Local\electron-builder
|--- Cache
|   |--- winCodeSign
|   |   |--- winCodeSign-2.6.0.7z
|   |--- nsis
|   |   |--- nsis-3.0.5.0.7z
|   |   |--- nsis-resources-3.4.1.7z

然后我们重新打包就可以了

3. 打包后不显示ui图标

如果使用了elementui等ui框架，打包后都变成了框框（▯）
解决：
在vue.config.js的pluginOptions的electronBuilder中添加

customFileProtocol: './'

4. electron-builder后出现找不到模块儿的问题

electron-builder打包后，可能会出现

Could not find module root given file: "app://./js/xx.js"

之前没遇到过，不知道是不是版本的问题，据说是官方有相关解释说明

Native modules are supported and should work without any configuration, assuming nodeIntegration is enabled. If you get errors, you may need to set the native dependency as an webpack external (opens new window). It should get found automatically, but it might not. To do this, use the externals option

然后，我看了下dist_electron\bundled下的package.json发现一个dependencies都没有，只有devDependencies
于是，我在vue.config.js中添加了一项配置，紧随nodeIntegration: true后：

externals: [
    "core-js",
    "view-ui-plus",
    "vue",
   	"...这里是你的依赖"
]

这样就能保留你想保留的依赖

5. RequestError: unable to verify the first certificate

确保你没有开加速器之类的东西

6. Module build failed (from ./node_modules/ts-loader/index.js)

完整报错：

 Failed to compile with 1 errors                                                                                                                                                                                                          14:45:51

 error  in ./src/background.ts

Module build failed (from ./node_modules/ts-loader/index.js):
TypeError: loaderContext.getOptions is not a function
    at getLoaderOptions (D:\项目路径\node_modules\ts-loader\dist\index.js:112:41)
    at Object.loader (D:\项目路径\node_modules\ts-loader\dist\index.js:15:21)

 @ multi ./src/background.ts

ts-loader版本太高，改为 8.2.0 重新打包试试

7. RequestError: connect ETIMEDOUT 20.205.243.166:443

较完整报错：

command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node install.js
npm ERR! RequestError: connect ETIMEDOUT 20.205.243.166:443

还是国内限制问题，尝试在环境变量中添加一下变量：

ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"

参考：《electron官方文档安装指导》

8. Error: The package “@esbuild/win32-x64” could not be found, and is needed by esbuild.

在项目目录下执行以下命令：

node node_modules/esbuild/install.js

------ 后面遇到其他再加…