electron-vite多窗口案例

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

配置electron.vite.config.mjs
指向对应的渲染文件，没有就创建
主进程创建窗口时指向预加载文件和要加载的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文件名一致，否则运行会提示找不到预加载脚本