electron中worker的js路径问题

Question

electron和vue中使用work导入的js路径问题

文件路径是src/utils/electronAPI/get

其中main.js

但是在运行electron:serve后这个去点击这个事件的时候，这个work.js没有成功，我猜测是因为man.js中new Worker中写的是字符串路径，在打包的时候估计没有导入这个work.js文件，怎么解决

Answer 1

该回答引用GPTᴼᴾᴱᴺᴬᴵ
您的猜测是正确的，这是因为在 Electron 的主进程中使用 new Worker 创建 Web Worker 时，路径是相对于主进程文件的，而不是相对于渲染进程文件的。

为了解决这个问题，您可以使用 __dirname 变量来获取主进程文件所在的目录，并将其与工作线程文件的相对路径连接起来，形成一个完整的路径，如下所示：

const path = require('path');
const workerPath = path.join(__dirname, 'utils/electronAPI/get/work.js');
const worker = new Worker(workerPath);

这样，无论您在开发模式下还是在打包后的应用程序中运行，都可以正确加载工作线程脚本。

另外，您也可以在 vue.config.js 中使用 Webpack 的 copy-webpack-plugin 插件将工作线程文件复制到构建输出目录中，以便 Electron 主进程可以正确访问它。具体操作请参考以下示例配置：

// vue.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // ...
  configureWebpack: {
    plugins: [
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.resolve(__dirname, 'src/utils/electronAPI/get/work.js'),
            to: path.resolve(__dirname, 'dist_electron')
          }
        ]
      })
    ]
  }
};

这将会把 work.js 文件复制到 dist_electron 目录下。然后您可以在 Electron 主进程中使用上面的代码来正确加载工作线程脚本。