VueJS 和 ElectronJS |当我在组件中导入 ipcRenderer 时,VueJS 完全停止渲染
VueJS and ElectronJS | VueJS stops rendering completely when I import ipcRenderer in a component
所以我正在编写一个 VueJS 和 ElectronJS 模板,可以在这里找到:https://github.com/dev-aethex/electronjstemplate
我的代码是这样工作的,
在我的 Vue 组件内部,我访问了一个名为 MainProcessInterface
的全局预构建 class,当它被构建时,它首先检查 vue 是否在开发服务器中为 运行 编译。如果它在开发服务器中,它将连接到开发套接字,如果电子处于开发模式且未编译,则电子主进程将托管该开发套接字。这种方法似乎效果很好,我不得不使用套接字,因为 vue dev 服务器正在通过 loadURL
加载到 electron 中,所以 vue 不知道 ipcRenderer
是什么。在主进程界面中,如果 vue 被编译,它将使用 ipcRenderer.send()
方法。这就是问题的根源。
Vue 一运行就想到 TS 代码,它看到 ipcRenderer.send
并在向电子 window 控制台打印错误时吓坏了,说 fs.existsSync 不存在或已定义.
我找不到解决这个问题的方法。我想也许我会把 MainProcessInterface
分成两份,一份给 ipc
,另一份给 websockets
。虽然不是很好的方法,但是在实现之前,我想知道有没有更好更合适的方法。
我对 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 构建的问题。
希望对您有所帮助!
所以我正在编写一个 VueJS 和 ElectronJS 模板,可以在这里找到:https://github.com/dev-aethex/electronjstemplate
我的代码是这样工作的,
在我的 Vue 组件内部,我访问了一个名为 MainProcessInterface
的全局预构建 class,当它被构建时,它首先检查 vue 是否在开发服务器中为 运行 编译。如果它在开发服务器中,它将连接到开发套接字,如果电子处于开发模式且未编译,则电子主进程将托管该开发套接字。这种方法似乎效果很好,我不得不使用套接字,因为 vue dev 服务器正在通过 loadURL
加载到 electron 中,所以 vue 不知道 ipcRenderer
是什么。在主进程界面中,如果 vue 被编译,它将使用 ipcRenderer.send()
方法。这就是问题的根源。
Vue 一运行就想到 TS 代码,它看到 ipcRenderer.send
并在向电子 window 控制台打印错误时吓坏了,说 fs.existsSync 不存在或已定义.
我找不到解决这个问题的方法。我想也许我会把 MainProcessInterface
分成两份,一份给 ipc
,另一份给 websockets
。虽然不是很好的方法,但是在实现之前,我想知道有没有更好更合适的方法。
我对 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 构建的问题。
希望对您有所帮助!