准备环境：

vue-cli 4

electron 11.2.1  //npm i electron -g    可以全局安装一次，再次使用时不需要联网下载

npm 6.14.11

node 14.15.3 （64bit）//这里注意：如果使用32位node后面使用ffi-napi只能调用32位动态链接库（.dll）

 

ffi-napi：

python 2.7//必须是2.7版本

Visual Studio 2017 + Microsoft .NET framework 4.5.1

创建项目

要点：使用cli先创建项目，并且手动使用vue add 指令集成router vuex css编译器，只有这样才能成功集成electron

然后使用vue add electron-builder集成electron后使用npm删除自动安装的electron，手动npm i electron -s -d添加新的electron

创建vue

vue create xxx

//构建完需要使用router和vuex可以直接vue add
vue add router
vue add vuex

/*Router，Vuex，css编译器  这里先不选  其他可以根据需求选择，
后面就可以根据需要选择vue2.0或者3.0
? Check the features needed for your project:
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 ( ) Router
 ( ) Vuex
>( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
*/

集成electron 

vue add electron-builder

/*这里随便选
? Choose Electron Version (Use arrow keys)
  ^7.0.0
  ^8.0.0
> ^9.0.0
*/

npm run electron:serve
/*
确认正常启动后关闭
*/

//卸载electron，然后重新安装一个
npm uninstall electron
npm install electron -s -d

 优化开发模式启动速度

Failed to fetch extension, trying 4 more times

出现这个字眼，导致拖延启动时间，解决办法：
注释background.js中ready生命周期里面这段代码
app.on('ready', async () => {
  /*if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }*/
  createWindow()
})

安装ffi-napi（需要先完成后面的ffi-napi环境搭建）

npm install -S ffi-napi

/*
耐心等待编译完成

+ ffi-napi@3.1.0
added 8 packages from 58 contributors in 82.821s

90 packages are looking for funding
*/

测试ffi-napi是否有效

在src目录下新建ffi-test.js

const ffi = require('ffi-napi');
const user32 = new ffi.Library('user32',{
    'ShowWindow':['int',['int','int']]
})

function hideWindow(hwnd){
    let show = user32.ShowWindow(hwnd,0)
    return show
}
export {
    hideWindow
}

 在background.js中const win = new BrowserWindow创建BrowserWindow对象语句后面添加

//导入
import {hideWindow} from './test-ffi'


//创建BrowserWindow对象语句后面添加
setTimeout(()=>{
    hideWindow(win.getNativeWindowHandle().readUInt32LE())
},10*1000)

此时运行会弹出JavaScript错误

Error: No native build was found for platform=win32 arch=x64 runtime=electron abi=85 uv=1 libc=glibc node=12.18.3 electron=11.2.1 webpack=true

在根目录新建vue.config.js并添加：

module.exports = {
    pluginOptions: {
      electronBuilder: {
        nodeIntegration: true,
        //因为这两个模块中包含原生 C代码，所以要在运行的时候再获取，而不是被webpack打包到bundle中
        externals: ['ffi-napi', 'ref-napi']
      },
      builderOptions: {
        extraResources: {
          // 拷贝静态文件到指定位置,否则打包之后出现找不到资源的问题.将整个resources目录拷贝到 发布的根目录下
          from: 'resources/',
          to: './'
        }
      }
    }
  }

再运行 npm run electron:serve 窗口创建10秒后消失就成功了

然后在控制太Ctrl+c关闭项目即可

搭建使用ffi-napi环境

我这里只简单记录，按步骤做 阔以使用ffi

详细攻略：   https://www.jianshu.com/p/dd9463dead8c

准备:python 2.7，Visual Studio 2017 （可能还需要Microsoft .NET framework 4.5.1）准备user32.dll（貌似可以直接调用，）

安装node-gyp 7.1.2//直接global全局安装即可

npm install node-gyp -g

完成后确认一下

node-gyp list

/*  输出：
gyp info it worked if it ends with ok
gyp info using node-gyp@7.1.2
gyp info using node@14.15.3 | win32 | x64
14.15.3
gyp info ok
*/

构建node-gyp

node-gyp rebuild

/*
使用命令提示符或者powershall   （管理员）
除网络出错外 一定要耐心等待到资源下载完成
完成后会尝试构建，如果目录在默认目录或者目录中没有构建文件报错属于正常现象

更换node版本时删除
C:\Users\（用户名）\AppData\Local
目录下的node-gyp文件夹
然后重新rebuild
*/

 安装 windows-build-tools（需要使用命令提示符 或者 powershall 管理员模式）

npm i -g --production windows-build-tools

/*
最好提前装好Python 2.7
如果 vsBuildTools 安装失败按照提示到指定目录手动安装
*/