vue.js - VueJS 和 ElectronJS | 当我在组件中导入 ipcRenderer 时，VueJS 完全停止渲染

问题描述

所以我正在编写一个 VueJS 和 ElectronJS 模板，可以在这里找到：https ://github.com/dev-aetex/electronjstemplate

我的代码是这样工作的，在我的 Vue 组件内部，我访问了一个名为的全局预构建类MainProcessInterface，当它被构建时，它首先检查 vue 是否已编译为在开发服务器中运行。如果它在开发服务器中，它将连接到电子主进程将托管的开发套接字，如果电子处于开发模式且未编译。这种方法似乎效果很好，我不得不使用套接字，因为 vue 开发服务器正在通过电子加载loadURL，所以 vue 不知道是什么ipcRenderer。在主进程界面中，如果编译了 vue，它将改为使用该ipcRenderer.send()方法。这就是问题的诞生。

一旦 Vue 运行考虑 TS 代码，它就会ipcRenderer.send在向电子窗口控制台打印错误时看到并吓坏了，说 fs.existsSync 不存在或已定义。

我找不到解决方法。我想也许我会分成MainProcessInterface两份，一份用于ipc，另一份用于websockets。虽然这不是一个很好的方法，但在实施它之前，我想知道是否有更好更合适的方法来做到这一点。

标签： vue.jselectron

我对 React 也有类似的问题。ipcRenderer您是否在构建过程中的某处导入对象？您可能希望确保它引用了正确的变量。我试图将其作为评论放入，但它不适合：

//index.html (index.ejs) for me... This is in the main HTML entry point

      var IPC = null;
      try {
        IPC = require('electron').ipcRenderer;
        console.log('IPC IS: ' + IPC)
      } catch (err) {
        console.log('CRICITCAL ERROR: IPC NOT ENABLED')
        console.log(err)
        IPC = null;
      }

然后我在 React 中初始化该上下文，并在此处启动：

     setTimeout(()=>{
        console.log('----------------HACK FIRED POST REHYDRATE')
        window.REDUX_STORE.dispatch( 
          (dispatch, getState) => {
            const _state = getState()
            if(window.IPC) {
              if(_state.osc && _state.osc.on) {
                dispatch( reconnectToEos() )
              } else {
                dispatch( updateStatus('[OSC Startup: DISCONNECTED]', ))  
              }
              console.log('\t------------ELECTRON')
            } else {
              //Shut off OSC
              dispatch( updateOscKey('on', false) )
              dispatch( updateStatus('[WebApp, OSC disabled]', ))
              console.log('\t------------WEB')
            }
          } 
        )
      }, 1000)

基本上我使用全局变量（window.IPC）来初始化我的应用程序，所以我不会在构建过程中导入错误的变量。我有相当多的 Electron API，这可以缓解通过 Webpack 构建的问题。

我希望这有帮助！

vue.js - VueJS 和 ElectronJS | 当我在组件中导入 ipcRenderer 时，VueJS 完全停止渲染

问题描述

解决方案

推荐阅读