vue-electron 新建窗口解决方案

一、问题描述

electron项目中，新建窗口的方法是在主进程中new一个BrowserWindow对象，并为其设置loadURL，代码如下

// 在主进程中.
const { BrowserWindow } = require('electron')
// 或者从渲染进程中使用 `remote`.
// const { BrowserWindow } = require('electron').remote

let win = new BrowserWindow({ width: 800, height: 600 })
win.on('closed', () => {
  win = null
})

// 加载远程URL
win.loadURL('https://github.com')

// 或加载本地HTML文件
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080`
  : `file://${__dirname}/index.html`
win.loadURL( winURL )

而在vue-electron中只有一个入口文件，无法再为webpack配置多一个入口，所以不能使用

二、解决

function createMinWindow () {
  Menu.setApplicationMenu(null) // 关闭子窗口菜单栏
  const modalPath = process.env.NODE_ENV === 'development'
    ? 'http://localhost:9080/#/miniWindow'
    : `file://${__dirname}/index.html#miniWindow`
// 使用hash对子页面跳转，这是vue的路由思想
  miniWindow = new BrowserWindow({
    width: 600,
    height: 400,
    webPreferences: {
      webSecurity: false
    },
    parent: mainWindow // mainWindow是主窗口
  })

  miniWindow.loadURL(modalPath)

  miniWindow.on('closed', () => {
    miniWindow = null
  })
}

然后在router文件中对该路径进行路由配置

routes: [
    {
      path: '/miniWindow',
      name: 'miniWindow',
      component: MiniWindow // 对应组件
    }
  ]

这样子窗口对应的组件就完成了配置，当打开窗口时显示了这个组件。