Electron + Vue + ffi-napi

本地环境

node: 16.13.2-ia32
npm: 8.3.0
node-gyp: 8.4.1
python: 3.10.1
Visual Studio: Visual Studio Comminity 2022

> type %userprofile%\.npmrc
cache=E:\repository\nodejs\cache
prefix=E:\repository\nodejs\modules

# Electron镜像源
electron_mirror=https://repo.huaweicloud.com/electron/

项目依赖

{
  "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"
  ]
}

问题

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文件夹中执行相关命令。

Error: No native build was found

在引入ffi-napi的时候抛出了以下错误

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添加以下内容

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安装成开发时依赖了。

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。

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的版本。

Error: Dynamic Linking Error: Win32 error 126

https://www.cnblogs.com/silenzio/p/11606389.html

查看6.1

[学习,记录] Electron+Vue+ffi-napi所遇到的问题