Vue에서 전자 이벤트를 사용할 때 __dirname이 정의되지 않은 수정 방법은 무엇입니까?

Vue에서 전자 이벤트를 사용할 때 __dirname이 정의되지 않은 수정 방법은 무엇입니까?

저는 nklayman/vue-cli-plugin-electron-builder를 사용하여 Vue/Vuex로 준비된 전자 앱을 만들었습니다.파일과 함께 배송됩니다.main.js,background.jsVue 컴포넌트 시작점을 포함합니다.하지만 행사가 제대로 진행되지 않아요.나의 시도는 수율보다 낮다.Uncaught ReferenceError: __dirname is not defined렌더링할 때(마지막으로 표시해도 됩니다.

컴포넌트: 스플래시표시하다

<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>

background.displays(배경).

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

...

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

main.discloss.main.discloss.

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')

전체 오류:

Uncaught ReferenceError: __dirname is not defined
    at eval (webpack-internal:///./node_modules/electron/index.js:4)
    at Object../node_modules/electron/index.js (chunk-vendors.js:1035)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Splash.vue?vue&type=script&lang=js&:6)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/components/Splash.vue?vue&type=script&lang=js& (app.js:986)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./src/components/Splash.vue?vue&type=script&lang=js&:2)
    at Module../src/components/Splash.vue?vue&type=script&lang=js& (app.js:1271)

내가 뭘 잘못하고 있는지 알기나 해?

이 문제를 해결하기 위해 파일을 만들었습니다.vue.config.js프로젝트 루트 내에서 콘텐츠와 함께

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

이 게시물에 설명된 솔루션을 적용할 수 있습니다. vue.js에서 ipcRenderer를 가져오는 방법 ? __dirname이 정의되지 않았습니다.

이렇게 하면 vue 파일에서 window.ipcRenderer.send(channel, args...)를 호출할 수 있습니다.

vue.config.js에서 preload.js를 설정했는지 확인합니다.

// vue.config.js - project root
module.exports = {
  pluginOptions: {
    electronBuilder: {
       preload: 'src/preload.js'  //make sure you have this line added
    }
  }
}

다른 솔루션은 https://medium.com/swlh/how-to-safely-set-up-an-electron-app-with-vue-and-webpack-556fb491b83 에서 찾을 수 있으며, 프리로드 파일을 vue.config.dload로 설정하는 대신 __static을 사용하여 참조합니다.작동시키려면 BrowserWindow 컨스트럭터 내에서 프리로드 es-lint 경고를 비활성화하면 됩니다.

// eslint-disable-next-line no-undef
preload: path.resolve(__static, 'preload.js')

preload.js 파일을 /public 폴더에 추가했는지 확인합니다.

전자에는 메인 프로세스와 렌더러 프로세스의 두 가지 프로세스가 있습니다.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

언급URL : https://stackoverflow.com/questions/62777834/how-fix-dirname-not-defined-when-using-electron-events-with-vue