下载node.js并检查版本

这里我下载的node版本为14.15.5(版本不能太低)。我下载的是32位(我在64位node环境下载ffi-napi时会提示:无法解析的外部命令)在这里插入图片描述


替换node.lib

打开C:\Users\你的用户名\AppData\Local\node-gyp\Cache\14.15.5\ia32看看里面的node.lib是不是只有几百K,如果是,那么你在安装ffi-node的时候八成是要报错了:node.lib : fatal error LNK1106: 文件无效或磁盘已满

解决方案如下

在https://nodejs.org/download/release/v14.1.0/win-x86/ 下载node.lib
在这里插入图片描述
然后替换C:\Users\你的用户名\AppData\Local\node-gyp\Cache\14.15.5\ia32里的node.lib
在这里插入图片描述

安装vue-cli并检查版本

确保版本在3.0以上(我用的版本是4.5.11)

npm install --global vue-cli

创建项目

vue create 项目名

选择Default([Vue 2] babel, eslint)就行(考虑到ui各种组件还不太支持Vue3,用Vue2就好)
在这里插入图片描述

下载election-bulider

创建完项目后,切换到项目目录,然后下载election-bulider

vue add electron-bulider

版本我选择11.0.0(这些版本应该都可以)
在这里插入图片描述

下载windows-build-tools

需要有下面这些环境

  • python(v2.7 ,3.x不支持);
  • visual C++ Build Tools,或者 (vs2015以上(包含15,本人环境为vs2017))
  • .net framework 4.5.1

简单的方法是直接下载windows-build-tools

需要管理员权限

npm install --global --production windows-build-tools

下载node-gyp

npm install -g node-gyp  

下载相关依赖

如果网速够好最好不要用国内镜像(个人测试淘宝镜像下载ffi-napi会出问题)

npm install ref-napi -S 
npm install ref-array-napi -S 
npm install ref-struct-napi -S 
npm install ffi-napi -S 

设置nodeIntegration为true

打开background.js
在这里插入图片描述

配置vue.config.js

如果项目里没有vue.config.js就自己新建一个然后粘贴如下代码

module.exports = {
    pluginOptions: {
      electronBuilder: {
        nodeIntegration: true,
        //因为这两个模块中包含原生 C代码,所以要在运行的时候再获取,而不是被webpack打包到bundle中
        externals: ['ffi-napi', 'ref-napi']
      }
    }
  }

测试

1.写一个dll
使用VS2017新建一个DLL(新建dll不是本文重点,流程请参照其他博客),写一个测试方法,返回一个数字

int returnANumber() {
	return 998;
}

注意因为node.js是32位的,所以这里生成的是32位的dll
在这里插入图片描述
2. 写调用dll的代码
将生成的dll文件拷贝到项目目录下,写一个调用dll的代码test.js

var ffi = require('ffi-napi')
var ref = require('ref-napi')
const dll = ffi.Library( '../resources/test.dll', {
  returnANumber: ['int', []]
})

module.exports = {
  returnANumber() {
    return dll.returnANumber();
  }
}

3.在组件中使用dll中的方法

<template>
  <div class="hello">
    <h1>数字:{{number}}</h1>
  </div>
</template>

<script>
import {returnANumber} from '../dlltest.js'
export default {
  name: 'HelloWorld',
  data(){
    return {
      number:returnANumber()
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

结果

在这里插入图片描述


参考博客

感谢各个大佬的博客
Electron9.x +vue+ffi-napi 调用Dll动态链接库
node-ffi 食用指南(难吃)
【node-gyp】坑爹的BUG node.lib: fatal error LNK1106 解决方案
手把手教你使用Electron5+vue-cli3开发跨平台桌面应用

Logo

前往低代码交流专区

更多推荐