vite 使用 webworker

发布时间 2023-05-17 09:42:08作者: 贝尔塔猫
  • 不能和 vite.config 的 server.origin 配置一起使用。
  • 可以使用第三方插件。
  • 可以使用 fetch 请求和处理数据。 

 

////////////////// App.vue
<button @click="go">发送消息</button>

// vite 第一种用法
var myWorker = new Worker(new URL('./worker.ts', import.meta.url))

// vite 第二种用法
import MyWorker  from './worker.ts?worker'
const myWorker = new MyWorker()

// 父接受子的消息
myWorker.onmessage = function (e) {
    console.log('Message received from worker', e)
}

// 父发送消息给子
function go() {
    myWorker.postMessage('hello')
}

////////////////// worker.ts

// 子接受父的消息
onmessage = function (e) {
    console.log('Message received from main script')
    const workerResult = 'Result: ' + e.data[0] * e.data[1]
    console.log('Posting message back to main script')
    // 子发送消息给父
    postMessage(workerResult)
}