Objetivo : Cuando uso electron-vue para desarrollar aplicaciones de escritorio, espero que la ventana principal abra una nueva ventana y que la interfaz de la nueva ventana sea la página del componente vue desarrollada por mí. El enrutamiento Vue se utiliza aquí para saltar a la página.
Proceso principal background.js
//var childWin; // 把childWin设置在函数外面和设置在函数里面效果不一样!
// 判断开发环境
const winURL = process.env.NODE_ENV === 'development'
? 'http://localhost:8080'
: `file://${
__dirname}/index.html`
function openChildWindow(param) {
var childWin = new BrowserWindow({
width: param.width,
height: param.height,
parent: win, // win是主窗口,不加parent,新建的窗口将于主窗口平级
webPreferences: {
nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION,
preload: path.resolve(__dirname, "../preload.js")
}
})
childWin.loadURL(winURL + '#' + param.url) // hash路由
childWin.webContents.openDevTools()
childWin.on('closed', () => {
childWin = null })
}
ipcMain.handle('on-open-event', (e, param) => {
openChildWindow(param)
})
Proceso de renderizado renderer.js
const {
contextBridge } = require('electron')
const openWindow = (param) => {
ipcRenderer.invoke('on-open-event', param)
}
contextBridge.exposeInMainWorld('myApi',{
openWindow });
El método openWindow se llama a través del evento vinculado en el componente vue.
openWindow() {
const param = {
url: '/luao', // 路由路径
width: 800,
height: 800
}
myApi.openWindow(param)
}
Errores a tener en cuenta : al crear rutas, debe utilizar el enrutamiento hash. Si utiliza el modo historial, no podrá encontrar la ruta.