既然是前端来开发客户端, 前端界面绘制肯定不会使用原生开发, 那么如何在 Electron
呢, 这里我使用的是 vue-cli-plugin-electron-builder
具体搭建方法请参考 Vue CLI
npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue --version
vue create electron-vue-edge
根据自己的需求选择对应的配置项
cd electron-vue-edge
yarn serve OR npm run serve
使用插件在 vue
项目中集成 Electron
vue add electron-builder
运行过程中需要选择版本, 这里选择的是 13.0.0
版本
npm run electron:serve
npm run electron:build
具体如何使用可以参考 # electron 踩坑之旅(二) —— 调用 .Net 的 DLL
yarn add electron-edge-js -S
<template>
<div id="app">
<h1>Welcome to Your Vue.js App</h1>
<button @click="testEdge">testEdge</button>
</div>
</template>
<script>
import edge from 'electron-edge-js'
export default {
name: 'App',
methods: {
testEdge() {
const helloWorld = edge.func(function () {/*
async (input) => {
return ".NET Welcomes " + input.ToString();
}
*/});
helloWorld('Electron', (error, value) => {
console.log(error, value)
})
}
}
}
</script>
此时会报第一个错
Uncaught ReferenceError: __dirname is not defined
我们需要在根目录创建 vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
}
第二个报错
Uncaught Error: The edge module has not been pre-compiled for Electron version 13.6.2 . You must build a custom version of edge.node. Please refer to https://github.com/agracio/edge-js for building instructions.
我们需要对应配置
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true,
externals: ['electron-edge-js']
}
}
}
重新运行可以发现
undefined ".NET Welcomes Electron"
至此我们可以安全使用 Electron
+ vue
+ edge
将 DLL 文件放入 public/dll
文件夹中
<button @click="testDll">testDll</button>
testDll() {
const Invoke = edge.func({
assemblyFile: 'public/dll/electronedge.dll',
typeName: "electronedge.MQ",
methodName: "Invoke"
})
Invoke('Electron', (error, value) => {
console.log(error, value)
})
}
undefined "来自dll : 2021-11-27 23:05:48.924 Electron"
如果执行的 DLL 文件是按照 32 位编译的或者依赖了其他 32 为程序, 那么就需要安装对应 32 为 的 Electron
npm install --arch=ia32 electron
最后打包程序的时候也要修改为 32 位的
"script": {
"electron:build": "vue-cli-service electron:build --ia32"
}