# Electron + Vue + ffi-napi ## 本地环境 ```plain node: 16.13.2-ia32 npm: 8.3.0 node-gyp: 8.4.1 python: 3.10.1 Visual Studio: Visual Studio Comminity 2022 ``` ```shell > type %userprofile%\.npmrc cache=E:\repository\nodejs\cache prefix=E:\repository\nodejs\modules # Electron镜像源 electron_mirror=https://repo.huaweicloud.com/electron/ ``` <br/> ## 项目依赖 ```json { "name": "2022-1-12", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "electron:serve": "vue-cli-service electron:serve", "electron:build": "vue-cli-service electron:build" }, "dependencies": { "core-js": "^3.6.5", "ffi-napi": "^4.0.3", "ref-napi": "^3.0.3", "ref-struct-di": "^1.1.1", "vue": "^2.6.11", "vue-router": "^3.2.0", "vuex": "^3.4.0" }, "devDependencies": { "@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-router": "~4.5.0", "@vue/cli-plugin-vuex": "~4.5.0", "@vue/cli-service": "~4.5.0", "electron": "^16.0.5", "electron-builder": "^22.14.5", "sass": "^1.26.5", "sass-loader": "^8.0.2", "vue-cli-plugin-electron-builder": "^2.1.1", "vue-template-compiler": "^2.6.11" }, "browserslist": [ "> 1%", "last 2 versions", "not dead" ] } ``` <br/> ## 问题 ### node-gyp 在安装ffi-napi的时候会进行编译操作，而在编译时报错了，错误信息提示找不到VS，于是根据报错信息去配置了msvs_version和VCINSTALLDIR等等...，后来才发现，错误信息最后的node-gyp版本不对，本地安装的node-gyp版本是8.4.1，而错误信息中提示的版本是8.3.0。 搜索后发现了和我情况一样的人。https://github.com/nodejs/node-gyp/issues/2552 对于Windows给到的解决方案如下 > Windows is a bit trickier, since `npm` might be installed to the "Program Files" directory, which needs admin privileges in order to modify on current Windows. Therefore, run the following commands **inside a `cmd.exe` started with "Run as Administrator"**: > > First we need to find the location of `node`. If you don't already know the location that `node.exe` got installed to, then run: > > ``` > $ where node > ``` > > Now `cd` to the directory that `node.exe` is contained in e.g.: > > ``` > $ cd "C:\Program Files\nodejs" > ``` > > If your npm version is ***7 or 8***, do: > > ``` > cd node_modules\npm\node_modules\@npmcli\run-script > ``` > > Else if your npm version is ***less than 7***, do: > > ``` > cd node_modules\npm\node_modules\npm-lifecycle > ``` > > Finish by running: > > ``` > $ npm install node-gyp@latest > ``` > > > > https://github.com/nodejs/node-gyp/blob/master/docs/Updating-npm-bundled-node-gyp.md 但是由于我配置了`prefix`目录，后来安装的npm@8.3.0版本并不在node所在的文件夹中，所以需要去到prefix目录下的npm文件夹中执行相关命令。 <br/> ### Error: No native build was found 在引入ffi-napi的时候抛出了以下错误 ```plain App threw an error during load Error: No native build was found for platform=win32 arch=ia32 runtime=electron abi=99 uv=1 libc=glibc node=16.9.1 electron=16.0.5 webpack=true ``` 解决方案是修改`vue.config.js`，为`vue-cli-plugin-electron-builder`添加以下内容 ```javascript module.exports = { pluginOptions: { electronBuilder: { externals: ['ffi-napi', 'ref-napi'] } } } ``` https://blog.csdn.net/paopao_wu/article/details/107507225#t20 如果还是报错，则查看package.json，是不是将ffi-napi和ref-napi安装成开发时依赖了。 <br/> ### Error: Dynamic Linking Error: Win32 error 193 实际上这个问题是在我刚试着使用ffi-napi时遇到的，ffi-napi不能加载不同架构的dll，x86只能加载x86，x86_64只能加载x86_64。 解决方案：重新生成dll，或用node-gyp重新编译ffi-napi和ref-napi，但需要注意，node-gyp不能跨架构编译，本地的node若为x64的，则node-gyp的编译目标也只能是x64。 <br/> ### is not a valid Win32 application 这个问题是因为编译出的ffi-napi和ref-napi与electron中的node架构不一样所导致的，目前仅在遇到`Win32 error 193`后碰到过该问题。 解决方案：重新编译ffi-napi和ref-napi，或更换electron的版本，可以在npm install的时候通过添加`--arch=ia32`或`--arch=x64`来指定安装的架构。 不过需要注意的是，如果本地的node为ia32的，那么即使指定了`--arch=x64`，安装的也会是ia32的版本。 <br/> ### Error: Dynamic Linking Error: Win32 error 126 https://www.cnblogs.com/silenzio/p/11606389.html 查看6.1