依賴環境
當前系統環境為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>
執行專案就可以看到效果了