步骤一

vue2使用时需要安装worker-loader，npm i worker-loader，修改配置vue.config.js

chainWebpack: config => {
    // set worker-loader
    config.module
      .rule('worker')
      .test(/.worker.js$/)
      .use('worker-loader')
      .loader('worker-loader')
      .end();
  },

步骤二

vue文件引用worker

// index.vue
import Worker from './worker.js';
//如果没有vue.config.js的项目，引入worker文件时，直接把路径加在worker-loader后，`import Worker from 'worker-loader!./worker.js';`
data() {
    return {
        workerRef:{}
    }
}
mounted() {
      this.workerRef = new Worker();
      this.workerRef.postMessage(0);

      this.workerRef.onmessage = e => {
        console.log('接收到计算结果:', e.data);
      };
}

我配置了vue.config.js 没有生效，所以使用了另一种方式，直接加到路径中了 import Worker from 'worker-loader!./worker.js';

步骤三

新建worker.js 文件 worker.js

onmessage = function (e) {
  // onmessage获取传入的值
  //写一个简单的计算
  let res = e.data+1;
  // 将计算的结果传递出去
  postMessage(res);
};

vue3+vite使用

vue3+vite

vite编译时直接支持worker，因此只需要编译时保证正常编译即可

/// vite.config.js
worker: {
    rollupOptions: {
    output: {
        assetFileNames: 'assets/[name].[ext]'
        }
    }
},

vue文件引用时直接引用即可，其他与v2无异

// index.vue

onMounted(()=>{
  workerRef.value = new Worker(new URL('@/workers/worker.js', import.meta.url));
})