A preface

The project needs to call the DLL dynamic library in the self-service printer, using the windows10 64-bit operating system environment. Due to special reasons need front-end implementation, simple VUE + browser environment is not able to achieve this requirement, node environment is required, so here choose Electron + Vue + FFI-NAPI to realize the call DLL dynamic library. The development environment is as follows:

• Vue – cli: 4.5.13
• Node: 14.17.0
• Vue: 2.6.11
• Electron: 12.0.0
• Ffi – for a: 4.0.3
• Vue – cli – plugin – electron – builder: 2.0.0
• Node – gyp: 8.1.0

2 Environment Preparation

Before installing dependencies, do some preparatory work. The ffi_nAPI dependency needs to be compiled when it is installed, otherwise an error will be reported because the ffi_nAPI dependency cannot be compiled.

Node-sass NPM I -g node-sass # NodeJS NPM I -g node-sass # NodeJS NPM I -g node-gyp # Windows Could not install Visual Studio Build Tools. Go to the C:\Users\xx\. Windows-build-tools directory to manually install, after the installation is successful, run the preceding command. npm i -g --production windows-build-toolsCopy the code

1 the pit

Node-gyp \bin\node-gyp.js is not found in node-gyp\bin\node-gyp.js. The solution is to clear the node environment and reinstall the node environment. The personal solution to the problem is to find the Node-gyp folder in node_global of node and copy it to the location of the command above.

Pit 2

Terminal that is required to run the NPM i-g –production windows-build-tools command as an administrator.

3 the pit

When installing Windows-build-Tools, the Visual Studio 15 build tool is waiting for Python to be installed successfully. You can end the current process first. Go to C:\Users\xx\. Windows-build-tools and double-click vs_buildtools. exe to install it manually, as shown in the figure below.

Iii. Generation Project

1 Generate vUE project

Vue -cli NPM I -g@vue /cli vue create electron_vue_dll_demo Choose Router, Vuex, Axios, etc.Copy the code

2 Install the electron builder plug-in

CD electron_vue_dll_demo vue add electron- Builder # select electron-12.0. 0Version.Copy the code

4 the pit

The installation electron takes a long time. You can configure the installation source in advance.

NPM set registry HTTPS: /.npmrc//registry.npm.taobao.org/
npm set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/
npm set SASS_BINARY_SITE http://npm.taobao.org/mirrors/node-sass 
npm set PYTHON_MIRROR http://npm.taobao.org/mirrors/python NPM I chromedriver -g --chromedriver_cdnurl= HTTP://npm.taobao.org/mirrors/chromedriver
Copy the code

3 Install ffI-NAPI dependencies

npm i ffi-napi ref-napi ref-array-napi ref-struct-napi -S
Copy the code

Ffi-napi will automatically call Windows compilation tools for compilation. Ref-napi does not, however, and you need to manually compile the node-gyp command

cd node_modules\ref-napi\
node-gyp configure
node-gyp build
Copy the code

4 Introduce the DLL dynamic library

Since this is DEMO, let’s copy it to the project directory first. The script part of home.vue is as follows:

import { Library } from "ffi-napi";
import path from "path";
const libPath = path.resolve("demo-dll.dll");
Copy the code

Called in home. vue’s Created lifecycle:

const libm = Library(libPath, {
  returnNumber2: ["int"[]],returnString: ["string"[]],sum: ["int"["int"."int"]],});const a = libm.returnNumber2(); / / 2
const b = libm.returnString(); // returnString
const c = libm.sum(2.3); / / 2 + 3 = 5
console.log(a, b, c);
Copy the code

The result is printed as follows:

2 "returnString" 5
Copy the code

5 the pit

Electron also needs to set nodeIntegration:true. In vue.config.js, the Settings are as follows:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,}}};Copy the code

6 the pit

The first run error is as follows:

No native build was found for platform=win32 arch=x64 runtime=electron abi=76 uv=1 libc=glibc
    at Function.load.path (webpack-internal:/ / / 382-47)
    at load (webpack-internal:/ / / 382:22)
    at eval (webpack-internal:/ / / 71:1)
    at Object.<anonymous> (renderer.prod.js:1)
    at N (renderer.prod.js:1)
    at eval (webpack-internal:/ / / 371:5)
    at Object.<anonymous> (renderer.prod.js:1)
    at N (renderer.prod.js:1)
    at eval (webpack-internal:/ / / 409:17268)
    at Module.<anonymous> (renderer.prod.js:1)
Copy the code

The local compilation module could not be found. Query the vuE-cli-plugin-electric-Builder plug-in document as shown below:

To configure the local package specified in externals of webpack. To quote from the official Webpack documentation:

Instead of packing imported packages into the bundle, obtain these external dependencies at runtime.

In vue.config.js, the Settings are as follows:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true.externals: ['ffi-napi'.'ref-napi']}}};Copy the code

7 the pit

Error: Dynamic Linking Error: Win32 Error 126

Cause: path problem, most likely not find the needed DLL dynamic library.

Solution: The reason to avoid this problem is to use absolute paths rather than relative paths whenever possible. Of course, this is arbitrary if you can guarantee that the path is fine.

Special attention should be paid to the fact that the startup path of Electron is different from the startup path after installation.

8 the pit

Error: Dynamic Linking Error: Win32 Error 193

Reason 1: The dynamic library DLL being invoked is 32-bit, whereas the target module needs to be 64-bit.

Solution: recompile a 64 – bit DLL dynamic library, problem solved.

If we switch to a 64-bit DLL dynamic library, there is also this problem, most likely the PROBLEM is that the DLL lacks the corresponding dependent DLL library.

Cause 2: The dependency library is missing.

Solution: Engaged in Windows system development partners know that we generally develop tools DLL library, more or less will rely on the system or third-party DLL library. This is also the advantage of DLL dynamic libraries, which can be dynamically dependent and dynamically called. If you want to save trouble, we can directly package the system or third-party library we need in the form of static library, so that we can use it wherever we take it, and there is a large probability that this problem will not occur. Therefore, we can use tools such as Depends to check whether the DLL’s dependent libraries are complete.

9 the pit

Error: Dynamic Symbol Retrieval Error: Win32 Error 127

This problem is usually caused by a problem with the DLL. That is to say, the generated C++ DLL dynamic library has a problem, generally because there is no exported method symbol, so when calling DLL can not find the corresponding method.

The simplest reason is that function methods are exported without extern “C”.

5 packaging

Execute the package script:

npm run electron:build
Copy the code

10 the pit

After executing exe:

The problem is that the DLL file cannot be found. The reason is that when packing, you did not copy the DLLS from your project into the dist_electron\win-unpacked folder that was eventually generated. This also needs to be configured in the vue.config.js file:

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true.// Since these modules contain native C code, they should be retrieved at runtime, rather than packaged into a bundle by Webpack
      externals: ['ffi-napi'.'ref-napi'].builderOptions: {
        extraResources: {
          // Copy the static file to the specified location. Otherwise, the resource cannot be found after packaging. Copy the entire Resources directory to the root of the publication
          from: 'resources/'.to: '/'
        }
      }
    }
  }
}
Copy the code

The appendix

Thanks to:

• Electron calls DLL development records
• Electron9.x +vue+ FFi – nAPI calls Dll dynamic link library
• JS call C++ dynamic library DLL simplest demo and problem collection

Examples of dynamic libraries in this article: github.com/alwxkxk/dem… If error 193 occurs, the DLL dynamic library of X64 needs to be rebuilt using VS.