vue2中引入worker.js(可以用来解决H5页面定时器进入手机后台之后，定时器被放缓的问题)

1.安装worker-loader

 npm i worker-loader -D

2.配置worker-loader

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,
  chainWebpack: config => {
		config.module
			.rule('worker')
			.test(/\.worker\.js$/)
			.use('worker')
			.loader('worker-loader')
            // .options({ inline: 'fallback' }) // 这个配置是个坑，不要加
	},
  devServer: {
    proxy: { //配置跨域
      '/api': {
        target: *****, //填写请求的目标地址
        // ws: true,
        changOrigin: true, //允许跨域
        pathRewrite: {
          '^/api': '' //请求的时候使用这个api就可以
        }
      }
    }
  }
});

3.创建worker.js

foo.worker.js

(function () {
  self.onmessage = e => {
    // e是 事件对象 MessageEvent
    // e.data是从外面传进worker的内容,假如传了 { a: 1 }
    console.log('⭐⭐⭐⭐⭐⭐⭐', e.data) // { a: 1 }
    /* do something */
  }

  setTimeout(() => {
    self.postMessage('hhhhh')
  }, 5000)
})()

3.vue页面中使用

<template>
  <div>
    Timer output: {{ timerOutput }}
  </div>
</template>

<script>
import myWorker from '@/views/foo.worker.js'
export default {
  data() {
    return {
      timerOutput: ''
    };
  },
  created() {
    
  },
  mounted () {
    const worker = new myWorker()
    worker.postMessage({ a: 1 })
    worker.onmessage = e => {
        // e 是 worker的事件对象 MessageEvent
        // 和 onclick 这些事件对象一个概念
        // e.data, 假如传入 { b: 1 }
        console.log('🐱🐱🐱🐱🐱🐱', e, e.data) // MessageEvent, { b: 1 }
        /* do something */
    }
  }
}
</script>