Electron-vite-vue3搭建及C++调用踩坑

1. Node环境

V14.8.2

2. 创建一个vite项目

在windows包里调出cmd后执行

npm create vite

3. 安装electron

npm install --save-dev electron

npm install --save-dev electron@20.0.0 指定版本

注意：在electron21+后调用C++动态库会出现Error: Error in native callback错误，原因：Electron 21 及更高版本将启用 V8 内存隔离区,这将对一些原生模块产生影响。

解决方案：降低electron版本，目前论坛大部分使用20.3.8（因网络原因，我这边直接使用原来下载好的20.0.0，测试20.3.12就不在支持了）

官网原文：Electron 和 V8 内存隔离区 | Electron

官网论坛：[Bug]: Electron 21 breaks node-api stability guarantees · Issue #35801 · electron/electron · GitHub

Vscode解决方案：https://github.com/microsoft/vscode/issues/177338

4. 配置electron

(1) 安装vite-plugin-electron，vite-plugin-electron-renderer

(2) 配置vite.config.js，将主进程设置为./electron/main/index.js

(3) 在electron/index.js下配置窗口基本信息

注意：静态页面index.html，因为index页面是我们加载main.js，配置全局引用的地方，所以在打包的时候需要把index.html进行保留，这个会在打包时候标注

5. 配置路由

安装引入依赖

npm install vue-router

(1) 将app.vue内容删除，补充router-view

(2) 注意：<template><router-view></router-view></template>外层套一层<div></div>，如果没有会导致路由失效，具体原因忘记了

(3) 添加router.js，在里面配置路由

(5) 在main.js中配置使用路由

6. c++调用

引入依赖库：ffi-napi，ref-array-napi，ref-napi，ref-struct-napi，iconv-lite

之前写的调用文章：

结构体指针取值问题：electron ffi调用C++ Struct指针取值问题 - 知乎

Dll调用常见问题：electron ffi-napi调用C++ dll踩坑记录 - 知乎

Callback返回空缓冲区问题：node-ffi 调用C++ dll Callback返回空缓冲区问题 - 知乎

7.打包

引入依赖

npm install rimraf -g

npm install electron-builder -g

(1) Rimraf 用来打包时快速删除依赖

(2) 配置vite及electron打包 并指定打包json

添加图片注释，不超过 140 字（可选）

(3） Public包拷贝到运行环境中

(4) 配置index.html为保留文件，不然打包后会显示白板

8.打包后Error: Cannot find module 'ref-napi'问题

目前是通过保留node_modules进行打包，可能会导致打包文件过大，暂时没有找到更好的解决方案

官网：

Guide | Vue CLI Plugin Electron Builder

论坛：

Error was reported after Electron APP was packed: Cannot find module 'reflect-metadata' · Issue #1618 · nklayman/vue-cli-plugin-electron-builder · GitHub

9. Electron打包失败问题

(1) 大概率是因为网络问题，下载失败

(2) 将electron-v20.0.0-win32-x64.zip放入electron的cache缓存中就可以了