我正在尝试在Vue cli3中启用Web Workers,但是我在使其正常工作方面遇到了困难。
我想使用以下包: worker-loader(而不是vue-worker),因为它看起来维护良好且有更多的贡献。
按照他们的教程,我尝试使用vue cli修改webpack,如下所示:
module.exports = {
chainWebpack: config => {
config.module
.rule('worker-loader')
.test(/\.worker\.js$/)
.use('worker-loader')
.loader('worker-loader')
.end()
}
}
我希望这应该与他们的相匹配。
{
module: {
rules: [
{
test: /\.worker\.js$/,
use: { loader: 'worker-loader' }
}
]
}
}
可以在此处阅读(https://github.com/webpack-contrib/worker-loader)。我尽力按照Vue CLI3的文档进行操作(在此处找到:https://cli.vuejs.org/guide/webpack.html#simple-configuration)。
我的组件非常简单:
import Worker from 'worker-loader!./../../sharedComponents/equations/recurringTimeComposer.js';
<...>
watch:{
recurringPaymentReturnObj: function(newVal, oldVal){
const myWorker = new Worker;
myWorker.postMessage({ hellothere: 'sailor' });
myWorker.onmessage = (e) => {
console.log('value of e from message return', e.data);
}
}
<...>
而在我的./../../sharedComponents/equations/recurringTimeComposer.js
文件中,我有:
onmessage = function(e) {
console.log('Message received from main script: ', e.data);
// var workerResult = 'Result: ' + e.data;
// console.log('Posting message back to main script');
postMessage('hello back handsome');
close();
}
我一直收到错误信息:
ReferenceError: window is not defined a162426ab2892af040c5.worker.js:2:15
经过一番搜索,我找到了这篇文章:https://github.com/webpack/webpack/issues/6642,其中建议最好的修复方式是将以下内容添加到Webpack中:
output: {
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
publicPath: 'http://localhost:3000',
globalObject: 'this'
},
修改了我的 vue.config.js
文件后,我得到了:
module.exports = {
chainWebpack: config => {
config.module
.rule('worker-loader')
.test(/\.worker\.js$/)
.use('worker-loader')
.loader('worker-loader')
.end()
config
.output
.path(path.join(__dirname, 'dist'))
.filename('bundle.js')
.publicPath('http://localhost:8080')
.globalObject('this')
}
}
...但我仍然收到窗口未定义的错误。
有没有人知道出了什么问题?这似乎是webpack中的奇怪错误。
谢谢!
编辑:哦对了,这里还有WebWorker的MDN页面:https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers。