Electron Vite模板中使用utilityProcess的路径解析问题

核心原因 #

Vite会对主进程代码（main.js）进行编译打包，开发环境下代码运行在临时目录，生产环境下输出到指定dist目录，导致传统的path.join(__dirname, 'test.js')无法正确定位原src下的test.js文件——因为__dirname的指向在Vite处理后发生了变化，且test.js默认不会被自动复制/打包到输出目录。

解决方案 #

方案1：直接复制test.js到输出目录（适合无需编译的脚本） #

1. 安装文件复制插件：

npm install vite-plugin-copy --save-dev

2. 在vite.config.js中配置复制规则：

import { defineConfig } from 'vite'
import electron from 'vite-plugin-electron'
import copy from 'vite-plugin-copy'

export default defineConfig({
  plugins: [
    electron({
      main: {
        entry: 'src/main.js',
      },
    }),
    copy({
      targets: [
        {
          src: 'src/test.js',
          dest: 'dist' // 对应你的Electron打包输出目录，默认一般为dist
        }
      ],
      hook: 'writeBundle' // 开发环境也实时复制文件
    })
  ]
})

3. 在main.js中区分环境获取路径：

import { utilityProcess } from 'electron'
import { join, dirname } from 'path'
import { fileURLToPath } from 'url'

// ES模块环境下手动获取__dirname
const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

let testScriptPath
if (process.env.NODE_ENV === 'development') {
  // 开发环境直接指向src下的原文件
  testScriptPath = join(process.cwd(), 'src', 'test.js')
} else {
  // 生产环境指向dist目录下的复制文件
  testScriptPath = join(__dirname, 'test.js')
}

// 启动后台进程
const worker = utilityProcess.fork(testScriptPath)

方案2：让Vite编译test.js（适合用ES模块语法的脚本） #

如果test.js使用了import/export等ES模块语法，可以把它作为独立入口让Vite编译：

1. 修改vite.config.js，添加utility进程的编译配置：

import { defineConfig } from 'vite'
import electron from 'vite-plugin-electron'

export default defineConfig({
  plugins: [
    electron({
      main: {
        entry: 'src/main.js',
      },
      // 新增utility进程的编译入口
      utility: {
        entry: 'src/test.js',
        vite: {
          build: {
            outDir: 'dist/utility' // 指定编译后的输出目录
          }
        }
      }
    })
  ]
})

2. 在main.js中引用编译后的路径：

import { utilityProcess } from 'electron'
import { join, dirname } from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)
const __dirname = dirname(__filename)

// 指向编译后的文件路径
const testScriptPath = join(__dirname, 'utility', 'test.js')
const worker = utilityProcess.fork(testScriptPath)

关键注意点 #

• 如果项目使用ES模块（package.json中设置了"type": "module"），必须通过fileURLToPath和dirname手动获取__dirname，ES模块环境中没有内置这两个变量。
• 开发环境下，Vite的dev server会动态编译代码，用process.cwd()拼接src路径更可靠，避免临时目录的影响。

内容的提问来源于stack exchange，提问作者rob