Question

我用nklayman/vue-cli-plugin-electron-builder创建了一个用Vue / Vuex准备的电子应用程序。它附带文件i.split(" - ")，main.js，包括Vue组件起点。但是我无法使这些事件正常进行。渲染时，我在下面的尝试中产生background.js（编译很好）。

组件：Splash.vue

Uncaught ReferenceError: __dirname is not defined

background.js

<template>
    <div @click="open">open</div>      
</template>

<script>

const { ipcMain } = require('electron')

export default {
    methods: {
        open()
        {
            ipcMain.on('my-open-event', (event, arg) => {
                console.log(event, arg)
            })
        }
    }
}
</script>

main.js

import { app, protocol, BrowserWindow } from 'electron'

...

app.on('my-open-event', async () => {
    try {
        "Will call some executable here";
    } catch (e) {
        console.error(e)
    }
})

完整错误：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

有什么想法我在做什么错吗？

Answer 1

为解决此问题，我在项目根目录中创建了一个包含内容的文件vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
}

Answer 2

电子有两个过程，主要过程和渲染过程。您的Vue组件是渲染器进程。为了在这两个进程之间进行通信，您需要进行进程间通信。因此，在您的情况下，您可能会使用background.js在ipcMain中定义一个频道。您将编写如下内容：

ipcMain.on("my-custom-channel", (event, args) => handleEvent(event, args));

然后在Vue组件中，使用渲染器进程ipcRendere，例如：

import { ipcRenderer } from "electron";

export default {
    methods: {
        open() {
            ipcRenderer.send('my-custom-channel', "hello from Vue!")
        }
    }
}

要点是：您不能将app.on用于自定义事件。 app.on处理预定义的电子事件。请改用ipcMain.on。

参考：https://www.electronjs.org/docs/api/ipc-main

在Vue中使用电子事件时，如何修复未定义的__dirname？

2 个答案: