electron和vue中使用work导入的js路径问题
文件路径是src/utils/electronAPI/get
其中main.js
但是在运行electron:serve后这个去点击这个事件的时候,这个work.js没有成功,我猜测是因为man.js中new Worker中写的是字符串路径,在打包的时候估计没有导入这个work.js文件,怎么解决
该回答引用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 主进程中使用上面的代码来正确加载工作线程脚本。