vue3 worker多线程

使用场景
最近在做一个数据大屏，页面初始要调8个接口，并且要每10秒刷新一次接口，所以想使用多线程实现
使用方法
1.安装worker-loader

npm install worker-loader

2.配置webpack
在vue.config.js文件的defineConfig里加上配置参数

 chainWebpack: config => {
    config.module
      .rule('worker-loader')
      .test(/\.worker\.js$/)
      .use({
        loader: 'worker-loader',
        options: {
          inline: true
        }
      })
      .loader('worker-loader')
      .end()
  }

3.使用
先在src目录下新建workers文件夹，接着在里面新建worker.js，在js文件里添加下面的测试代码：

addEventListener('message', e => {
    const { data } = e
    console.log(data)
    setTimeout(() => {
        return postMessage('线程完成')
    }, 1000)
})
export default {}

之后就可以新建一个vue文件，加入下面代码进行测试：
引入js文件时需要使用worker-loader!@，并且路径是从src目录下开始数层级的，并非你执行的vue文件开始，这就是我一直不能正常跑起来的原因。

<script>
import Worker1 from 'worker-loader!@/workers/worker1'
export default {
	data(){
		return {
			events :[]
		}
	},
	mounted(){
		const worker1 = new Worker1()
        setInterval(()=>{
            worker1.postMessage('开启线程1')
            worker1.onmessage = e => {
                if(e.data.result == 1){
                    that.events = e.data.data
                }
            }
        },10000)
	},
}

ts项目注意事项
当你把代码写成typeScript时（因为线程跑完后我返回了字符串，所以event里的data需要声明为string），你会发现引入的ts文件路径会报波浪线：

这时我们需要在shims-vue.d.ts文件中声明一下文件路径，直接为所有.ts文件声明也行：