Electron11+Vue+ffi-napi环境配置

愚者吃鱼

已于 2022-05-29 19:24:43 修改

阅读量4.6k

点赞数 3

分类专栏：桌面应用文章标签： vue dll javascript node.js

于 2021-02-19 16:55:12 首次发布

本文链接：https://blog.csdn.net/ReDreamme/article/details/113865100

版权

桌面应用专栏收录该内容

2 篇文章 0 订阅

订阅专栏

下载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>

结果

在这里插入图片描述