electron-vue开发笔记（2）多窗口单页面入口配置

准备写个系列，先把flag立上～

• Github源码
• 1. electron-vue开发笔记（1）工程搭建及问题解决
• 2. electron-vue开发笔记（2）多窗口单页面入口配置
• 3. electron-vue开发笔记（3）多窗口多页面入口配置
• 4. electron-vue开发笔记（4）main进程断点调试vscode配置
• 5. electron-vue开发笔记（5）集成sqlite数据库

问题

electron-vue默认的配置是单页面应用在这种情况下想实现多个窗口，即

同时打开aWin，bWin两个窗口，
且aWin窗口展示"/"路径对应页面，bWin窗口展示"/bPage"路径对应页面。

解决方案

• 首先在renderer里创建一个SameEntryPage.vue组件，并配置好路由。

// SameEntryPage.vue
<template>
  <div> same entry page </div>
</template>

<script>
  export default {
    name: 'same-entry-page'
  }
</script>

<style>
</style>

// router/index.js
import SameEntryPage from '../components/SameEntryPage.vue'
// 添加路由
{
  path: '/same-entry-page',
  name: 'same-entry-page',
  component: SameEntryPage
}

• 然后在main里新建sameEntryWindow.js，用来创建单页面入口的测试窗体。

// sameEntryWindow.js
import { BrowserWindow } from 'electron'

// ---------这里是重点---------
// router采用hash模式，打开该窗体则显示该路径组件
const winURL = process.env.NODE_ENV === 'development'
  ? `http://localhost:9080/index.html#/same-entry-page`
  : `file://${__dirname}/index.html#/same-entry-page`

// eslint-disable-next-line no-unused-vars
let window = null

function createWindow () {
  window = new BrowserWindow({
    width: 300,
    height: 400,
    title: 'Same Entry Window',
    webPreferences: {
      backgroundThrottling: false,
      nodeIntegration: true // Electron升级到5.0以上之后，在创建窗口的时候需要手动开启node集成
    }
  })
  window.loadURL(winURL)

  window.on('closed', function () {
    window = null
  })
}

function showWindow () {
  if (window === null) {
    createWindow()
  }

  window.show()
  window.focus()
}

export default showWindow

效果

Happy Ending

Github源码