Electron-Vite项目中预加载脚本的命名与配置指南

在Electron-Vite项目中，预加载脚本(preload)的配置是一个常见但容易出错的环节。本文将详细介绍如何正确配置不同命名的预加载脚本，帮助开发者避免常见的路径和命名问题。

预加载脚本的基本配置

Electron-Vite默认支持两种命名的预加载脚本文件：

• index.js
• preload.js

这两种命名的文件可以直接在webPreferences.preload中引用，无需额外配置。例如：

new BrowserWindow({
  webPreferences: {
    preload: join(__dirname, '../preload/index.js')
    // 或
    // preload: join(__dirname, '../preload/preload.js')
  }
})

自定义命名的预加载脚本

当需要使用其他名称的预加载脚本时（如test.js），需要进行额外配置：

1. 在electron.vite.config.mjs中配置rollup输入选项：

preload: {
  build: {
    rollupOptions: {
      input: {
        customPreload: resolve(__dirname, 'src/preload/test.js')
      }
    }
  }
}

2. 或者使用build.lib.entry配置：

preload: {
  build: {
    lib: {
      entry: resolve(__dirname, 'src/preload/test.js')
    }
  }
}

路径问题的解决方案

在Electron-Vite项目中，开发者常遇到以下路径问题：

1. 相对路径错误：确保引用的路径正确指向源文件位置，而非构建后的输出目录。

2. __dirname指向问题：在开发模式下，__dirname可能指向out/main目录而非源文件目录。解决方案包括：

   • 使用绝对路径
   • 通过process.cwd()获取正确的工作目录
   • 在配置文件中定义路径别名

最佳实践建议

1. 对于简单项目，建议使用默认的index.js或preload.js命名，减少配置复杂度。

2. 对于多窗口应用，可以为每个窗口创建单独的预加载脚本文件，并通过上述方法正确配置。

3. 在引用路径时，始终使用path.join或path.resolve来构建跨平台兼容的路径。

4. 开发过程中，可以通过检查构建输出目录(out/preload)来验证预加载脚本是否被正确打包。

通过理解这些配置原则和常见问题解决方案，开发者可以更高效地在Electron-Vite项目中管理和使用预加载脚本。