electron-vite多窗口案例

案例使用electron-vite加载2个窗口，每个窗口加载不同的url

1. 配置electron.vite.config.mjs
2. 指向对应的渲染文件，没有就创建
3. 主进程创建窗口时指向预加载文件和要加载的url或本地html文件

//electron.vite.config.mjs中的配置

import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import { resolve } from 'path'

export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()],
    build: {
      rollupOptions: {
        input: {
          /**
           * 多窗口需要指向对应的js文件，并且需存在,否则无法加载预加载脚本
           * 需要注意的是这里的browser要和主进程中指向预加载的js文件名一致
           */
          browser: resolve(__dirname, 'src/preload/browser.js'),
          webview: resolve(__dirname, 'src/preload/webview.js')
        }
      }
    }
  },
  renderer: {
    build: {
      rollupOptions: {
        input: {
          /**
           * 多窗口需要指向对应的html文件，需要指向对应的html文件，并且需存在。
           * 如果没有webview.html文件并在下面声明了，对应窗口会提示framework.xxxxx.js:1 Hydration completed but contains mismatches
           * 如果两个html没什么用的，就是占个位，比如窗口加载的是其他网站的url，可以同时指向一个空的html文件
           */
          browser: resolve(__dirname, 'src/renderer/browser.html'),
          webview: resolve(__dirname, 'src/renderer/webview.html')
        }
      }
    }
  }
})

需要注意的是这里的input下的key字段，如browser要和主进程中指向预加载的js文件名一致，否则运行会提示找不到预加载脚本

---

在src/renderer下创建对应的html指向文件(renderer渲染进程)

1. 可以同时指向同一个html文件，这种情况一般适用于加载的是第三方url，比如加载的是B站。
   
   

在src/preload下创建对应的预加载脚本文件

主进程创建窗口和使用预加载脚本

最终运行