这是哪个地方没有配置导致的问题，如何解决？(标签-electron|关键词-set)

Question

在electron-vite的项目中，vue文件使用worker在开发环境下可以正常的触发worker内部的代码，但是在打包后的生产环境无法执行相关代码，使用控制台内部的源码查询无法找到相关的源码文件

import PainterManager from "../utils/painterManager?worker";

const painterManager = new PainterManager();

这是开发环境下的

这是生产环境下的

没有文件，然后再out/renderer/assets文件夹内可以查询构建之后的js文件

这是哪个地方没有配置导致的问题

Answer 1

阿里嘎多学长整理AIGC生成，因移动端显示问题导致当前答案未能完全显示，请使用PC端查看更加详细的解答过程

问题分析

根据你的描述，问题出在electron-vite项目中，vue文件使用worker在开发环境下可以正常工作，但是在打包后的生产环境中无法执行相关代码。这个问题可能与electron的打包机制有关。

解决方案

electron-vite项目中，需要在electron-builder的配置文件中，添加nodeIntegration和contextIsolation的配置，来解决worker在生产环境下无法执行代码的问题。

// electron-builder配置文件
{
  "build": {
    "nodeIntegration": true,
    "contextIsolation": false
  }
}

此外，还需要在electron的main.js文件中，使用contextBridge来暴露worker的接口，来让electron的主进程能够与worker通信。

// main.js
const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('workerApi', {
  // worker接口
});

注意

在electron-vite项目中，需要使用electron-builder来打包electron应用，才能解决worker在生产环境下无法执行代码的问题。