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

以下是基于 Electron-vite-vue3 搭建项目及 C++调用 的完整流程和常见问题解决方案：

• Node.js 版本：推荐使用 v14.8.2（兼容性稳定）。
• Electron 版本：

  避免使用 Electron 21+（因 V8 内存隔离区导致 C++ 动态库调用报错 Error: Error in native callback）。

  推荐版本：Electron 20.0.0 或 20.3.8（测试稳定）。

  安装命令：

  npm install --save-dev electron@20.0.0

1. 在终端执行以下命令生成 Vue3 项目模板：

   npm create vite
   

2. 选择模板：Vue + JavaScript/TypeScript（根据需求选择）。

1. 安装依赖：

   npm install --save-dev vite-plugin-electron vite-plugin-electron-renderer

2. 修改 vite.config.js：

   配置主进程入口文件（如 ./electron/main/index.js）：

   import { defineConfig } from 'vite';import electron from 'vite-plugin-electron';export default defineConfig({ plugins: [ electron({ main: { entry: './electron/main/index.js', }, }), ],});
   

3. 主进程配置（electron/main/index.js）：

   创建窗口并加载前端页面：

   const { app, BrowserWindow } = require('electron');app.whenReady().then(() => { const win = new BrowserWindow({ webPreferences: { nodeIntegration: true, contextIsolation: false, // 允许直接调用 Node.js API }, }); win.loadFile('dist/index.html'); // 打包后路径});

1. 安装依赖：

   npm install vue-router

2. 修改 App.vue：

   替换为路由视图容器（外层必须包裹 <div>，否则路由失效）：

   <template> <div> <router-view></router-view> </div></template>
   

3. 创建路由文件（router.js）：

   import { createRouter, createWebHashHistory } from 'vue-router';import Home from './views/Home.vue';export default createRouter({ history: createWebHashHistory(), routes: [{ path: '/', component: Home }],});

4. 在 main.js 中引入路由：

   import { createApp } from 'vue';import App from './App.vue';import router from './router';createApp(App).use(router).mount('#app');

1. 安装依赖库：

   npm install ffi-napi ref-array-napi ref-napi ref-struct-napi iconv-lite

2. 常见问题及解决方案：

   结构体指针取值问题：参考

   结构体指针取值问题
   。

   Dll 调用常见问题：参考

   Dll 调用常见问题
   。

   Callback 返回空缓冲区：参考

   Callback 返回空缓冲区问题
   。

3. 示例代码（调用 C++ DLL）：

   const ffi = require('ffi-napi');const lib = ffi.Library('./path/to/your.dll', { 'your_function': ['int', ['string', 'int']],});console.log(lib.your_function('arg1', 123));

1. 安装打包工具：

   npm install rimraf electron-builder -g

2. 配置打包脚本（package.json）：

   "scripts": { "build": "rimraf dist && vite build && electron-builder"}

3. 修改 vite.config.js 和 electron-builder.yml：

   确保 index.html 被保留（避免打包后白板）：

   export default defineConfig({ build: { rollupOptions: { output: { assetFileNames: 'assets/[name]-[hash][extname]', entryFileNames: 'js/[name]-[hash].js', }, }, },});
   

4. 处理静态资源：

   将 public 目录拷贝到打包输出目录（如 dist）：

   import fs from 'fs';import path from 'path';fs.cpSync('./public', './dist', { recursive: true });
   

1. 打包后报错 Cannot find module 'ref-napi'：

   原因：依赖未正确打包。

   临时方案：保留 node_modules 打包（但会导致体积过大）。

   参考链接：

   Handling Static Assets
   。

2. Electron 下载失败：

   手动下载对应版本的 electron-v20.0.0-win32-x64.zip，放入 Electron 缓存目录（如 ~/.electron）。

• Electron 版本：优先使用 20.x（避免 21+ 的 V8 内存隔离问题）。
• C++ 调用：通过 ffi-napi 系列库实现，注意结构体和回调处理。
• 打包优化：需解决依赖打包和静态资源拷贝问题。

按此流程操作可减少踩坑，如遇其他问题可参考提供的链接或社区讨论。