依赖环境
当前系统环境为win11，真正上手才知道环境问题才是最大的问题，希望本文能帮你节约时间。
本文参考以下资料
https://www.electronforge.io/guides/framework-integration/vue-3
perplexity.ai和kimi.ai提供其他相关资料
nodejs
在开发前需要确定你要调用的dll是32位还是64位的，你的nodejs需要切换到对应的版本，这里推荐使用nvm来管理
nodejs版本，千万不要用Volta。在https://github.com/coreybutler/nvm-windows/releases下载nvm.
这里以调用32位dll为例，下载安装后执行以下命令，如果你的dll是64位的就把32换成64
nvm install 20 32
nvm use 20 32
依赖工具
在开发过程中要调用dll还需要python和Visual Studio Build Tool,这里推荐使用Chocolatey安装
Chocolatey
- 以管理员身份打开命令提示符
- 输入以下命令并回车
@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"
python 与 Visual Studio Build Tool
- 输入以下命令并回车
choco install python visualstudio2022-workload-vctools -y
Visual Studio
开发c#需要Visual Studio，这里推荐Visual Studio 2022，下载地址https://visualstudio.microsoft.com/downloads/，安装选项如下狗血即可
创建项目
vue3 + electron
- 安装electron
npm init electron-app@latest my-vue-app -- --template=vite
- 进入
my-vue-app安装vue
cd my-vue-app
npm install vue
npm install --save-dev @vitejs/plugin-vue
- 修改index.html
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>Hello World!</title></head><body><div id="app"></div><script type="module" src="/src/renderer.js"></script></body>
</html>
- 新建src/App.vue
<template><h1>💖 Hello World!</h1><p>Welcome to your Electron application.</p>
</template><script setup>console.log('👋 This message is being logged by "App.vue", included via Vite');
</script>
- 修改src/renderer.js
import { createApp } from 'vue';
import App from './App.vue';createApp(App).mount('#app');
- 修改vite.renderer.config
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';// https://vitejs.dev/config
export default defineConfig({plugins: [vue()]
});
如此就你创建了一个vue3+electron应用了
调用c# dll
electron-edge-js
注意electron-edge-js和electron大版本需保持一致，electron-edge-js各版本要求nodejs版本不同，具体查看https://www.npmjs.com/package/electron-edge-js，如果你的dll是64位的就无需添加--arch=ia32
npm install electron-edge-js@32 electron@32 --arch=ia32
重新编译
为了保证环境不出问题，依次执行以下命令，package-lock.json最好也删除掉，如果你的dll是64位的就无需以下操作
:: npm清除缓存
npm cache clean --force
:: 删除依赖目录
rmdir /s /q node_modules
:: 重新安装依赖
npm install --arch=ia32
:: 重新编译依赖
npx electron-rebuild --arch=ia32
简单dll开发
创建项目
使用Visual Studio 2022创建项目，如图所示
因为我们的项目是32位的,所以生成配置需要如下配置,否则会无法调用，如果你的dll是64位的就无需以下操作
简单代码
将默认的Class1重命名位Test，并修改代码如下,注意方法返回类型必须是Task<object>,不然调用时会报错
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace Test
{public class Test{public async Task<object> SayHi(dynamic input){Console.WriteLine(input.ToString());// 模拟异步操作await Task.Delay(1);// 返回一个字符串结果Console.WriteLine("c# result");return "true";}}
}
调用dll
- 修改electron-ui/src/main.js
在const path = require('node:path');代码后添加以下代码
const edge = require('electron-edge-js');// Handle creating/removing shortcuts on Windows when installing/uninstalling.
if (require('electron-squirrel-startup')) {app.quit();
}ipcMain.handle('dllTest', async (event, { methodName, params } = {}) => {try {const fun = edge.func({// 调用方法名methodName,// dll路径assemblyFile: '路径',//命名空间和类名typeName: 'PdfStaticViewer.PdfStaticViewer'});console.log('dll loaded successfully');// 等待 Promise 解决并返回结果const result = await fun(params);console.log('result:', result);return result;} catch (error) {console.error('Error invoking remote method:', error);throw error; // 或者返回一个错误消息}
});
- 修改src/preload.js
const { contextBridge, ipcRenderer } = require('electron');// 使用 contextBridge 暴露 API
contextBridge.exposeInMainWorld('electron', {invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args)
});
- 修改src/App.vue
注意这里用了element-plus,自行引入一下
<template><div><el-button type="primary" @click="onClick">调用CA</el-button></div>
</template><script setup>const onClick = () => {window.electron.invoke('dllTest', {methodName: 'SayHi',params: '你好'});};
</script>运行项目就可以看到效果了
