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

2024-01-03 23:29:04

前言

在上一篇electron-vue开发笔记（1）工程搭建及问题解决中，我们已经完成了 electron-vue 工程的搭建并解决了几个常见问题。接下来，我们将开始配置 electron-vue 多窗口单页面入口。

正文

1. 多窗口单页面入口配置

首先，我们需要在 main.js 中配置多窗口单页面入口。

const { app, BrowserWindow } = require('electron')

function createWindow () {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  // 加载 HTML 文件
  win.loadFile('index.html')

  // 打开开发者工具
  win.webContents.openDevTools()
}

// Electron 启动后创建窗口
app.whenReady().then(() => {
  createWindow()

  // 在 macOS 上，除非用户使用 Cmd + Q 退出，否则应用程序应保持活动状态
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 在所有窗口关闭后退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

// 在 macOS 上，当单击 dock 图标并且没有其他窗口打开时，重新创建一个窗口
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

2. 在 `index.html` 中配置多窗口单页面入口

接下来，我们需要在 index.html 中配置多窗口单页面入口。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <div id="app"></div>
  <script src="main.js"></script>
</body>
</html>

3. 在 `vue.config.js` 中配置多窗口单页面入口

最后，我们需要在 vue.config.js 中配置多窗口单页面入口。

module.exports = {
  // ...

  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      builderOptions: {
        singleInstance: false
      }
    }
  }
}