vue 中使用 worker-loader 及遇到的问题

Web Worker 使用教程
Worker - Web API 接口参考 | MDN

版本

• Vue CLI 3
• webpack 4
• worker-loader 3

vue-cli3 中依赖的 webpack 版本是 "webpack": "^4.0.0"，而 "worker-loader": "^3.0.0" 要求的 webpack 版本是 4 | 5。
使用前要检查下各个依赖对应版本，不然会引发一些错误。
不同版本配置文件会有所不同，后面介绍。

使用

参考：vue中使用web worker

webpack 配置

vue-cli 的 webpack 配置在 vue.config.js 文件中，Vue CLI 内部的 webpack 配置是通过 webpack-chain 维护的，采用链式操作的写法：

vue.config.js

chainWebpack: config => {
   
	// 配置
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker')
      .loader('worker-loader')
      .options({
   
        inline: 'fallback'
      })
    // 解决 "window is undefined", 这是因为 worker 线程中不存在 window 对象, 要用 this 代替: (不过我的项目中配置了这个也不行, 用的 self 代替, 后面介绍)
    config.output.globalObject('this')
  }