Utilice la configuración del cargador de trabajadores de webWorker en vue

1. Descargue el paquete de dependencia

npm i [email protected] --save

2. El uso de trabajador-cargador en vue en lugar del objeto de trabajo que viene con la ventana es principalmente para resolver el problema de la ruta, por lo que es necesario analizarlo y configurarlo para que la ruta se analice correctamente. Agregue un análisis de ruta de chainWebpack (la configuración de chainWebpack como paquete web es la misma que la de extendWebpack). Después de agregar la configuración de análisis, trabajador-cargador puede analizar el archivo js con el sufijo trabajador.js como un objeto de trabajo.

Configuración en vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
       chainWebpack(config) {
         config.module
           .rule('worker')
           .test(/\.worker\.js$/)
          .use('worker-loader')
           .loader('worker-loader')
           .end();
        config.module.rule('js').exclude.add(/\.worker\.js$/)
       },
})

En otras herramientas o marcos de empaquetado, el uso del paquete webpack puede encontrar
chainWebpack o extendWebpack en el archivo de configuración de scaffolding.

En el objeto de compilación de quasar.config.js en quasar cli

    build: {
      vueRouterMode: 'hash', // available values: 'hash', 'history'

      // transpile: false,
      // publicPath: '/',

      // Add dependencies for transpiling with Babel (Array of string/regex)
      // (from node_modules, which are by default not transpiled).
      // Applies only if "transpile" is set to true.
      // transpileDependencies: [],

      // rtl: true, // https://quasar.dev/options/rtl-support
      // preloadChunks: true,
      // showProgress: false,
      // gzip: true,
      // analyze: true,

      // Options below are automatically set depending on the env, set them if you want to override
      // extractCSS: false,

      // https://v2.quasar.dev/quasar-cli-webpack/handling-webpack
      // "chain" is a webpack-chain object https://github.com/neutrinojs/webpack-chain

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

3. Cree una carpeta de trabajadores en la carpeta src para almacenar todos los archivos de los trabajadores y cree un archivo js de subproceso test.worker.js.

 

 El código se muestra a continuación.

//监听主线程传递的消息
self.addEventListener("message", (e) => {
console.log("子线程both：",e.data)
//逻辑代码

//返回给主线程逻辑后消息
self.postMessage('子线程返回消息')
});

4. Introduzca el archivo del subproceso creado en el hilo principal.

import testWorker from '../workers/test.worker.js'

 crear hilo

  initTest(){
    const worker = new testWorker()
 //向子线程发送消息postMessage
  worker.postMessage('开启线程')
//接收子线程传递过来的消息
worker.onmessage = e => {
    console.log('主线程both：',e.data)
    setTimeout(() => {
      worker.postMessage('线程关闭both')
      //terminate销毁线程
      worker.terminate()
    }, 1000)
  }
  },