使用worker报错:Uncaught DOMException: Failed to construct ‘Worker’: Script at***

解决问题流程:

报错截图如下:

在这里插入图片描述

出现这个错误大概率vue.config的配置问题,先放上我原来的配置

 // 解决打包的时报错
  parallel: false,
  chainWebpack: (config) => {
    // set worker-loader
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .end();
    config.module.rule('js').exclude.add(/\.worker\.js$/);
    
    config.plugin('define').tap((args) => {
      const [define] = args;
      Object.assign(define, {
        IS_APPLET: JSON.stringify(true),
        UNIQUE_MARK: JSON.stringify(uniqueMark),
      });
      return args;
    });
  },

博主在网络上湖搜海搜搜到了如上配置,发现到手后启动项目浏览器报了 标题的错误。
简单使用百度翻译翻译一下: 处于安全考虑worker在本地无法运行啊 balabala。然后方向就有点跑偏了,看了许多文章都说要把worker文件部署到服务器上。这些一看人都麻了,这不是相当离谱?

解决关键:

最后, 找到了如下配置解决了报错可以用了,it works!
在网络上有些文章是没有options的调用,所以用了他们的代码后出现了报错。具体原因由于我技术受限没有了解清楚为什么加上options就解决了这个问题 =。= 算是一个小遗憾吧,我还是很好奇的。如果有热心网友知道请赐教!

在这里插入图片描述

 .options({
        inline: 'fallback',
        filename: 'workerName.[hash].worker.js',
      })

加上这个options就解决了报错

题外话

之前试了下用worker-plugin是不是就可以不用配置这么多了,但是自己使用的过程中报错了且没解决掉。最后老老实实这么配置了=。= 使用的时候别忘记引入 worker-loader!!

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值