如何建立Electron + Vue3專案， 並呼叫C# dll

魔狼再世發表於2024-10-19
VueC#

依賴環境

當前系統環境為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

  1. 以管理員身份開啟命令提示符
  2. 輸入以下命令並回車
@"%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

  1. 輸入以下命令並回車
choco install python visualstudio2022-workload-vctools -y

Visual Studio

開發c#需要Visual Studio，這裡推薦Visual Studio 2022，下載地址https://visualstudio.microsoft.com/downloads/，安裝選項如下狗血即可

建立專案

vue3 + electron

  1. 安裝electron
npm init electron-app@latest my-vue-app -- --template=vite
  1. 進入my-vue-app安裝vue
cd my-vue-app
npm install vue
npm install --save-dev @vitejs/plugin-vue
  1. 修改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>
  1. 新建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>
  1. 修改src/renderer.js
import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');
  1. 修改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

  1. 修改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; // 或者返回一個錯誤訊息
  }
});
  1. 修改src/preload.js
const { contextBridge, ipcRenderer } = require('electron');

// 使用 contextBridge 暴露 API
contextBridge.exposeInMainWorld('electron', {
  invoke: (channel, ...args) => ipcRenderer.invoke(channel, ...args)
});
  1. 修改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>

執行專案就可以看到效果了

相關文章