关于VueCli项目中如何加载调试Worker和SharedWorker

h6play

已于 2024-04-03 17:59:09 修改

阅读量1k

点赞数 10

CC 4.0 BY-SA版权

分类专栏： js Web前端文章标签： vue.js 前端 javascript worker sharedworker

于 2024-04-03 17:56:22 首次发布

本文链接：https://blog.youkuaiyun.com/u014771745/article/details/137352783

安装Webpack插件

VueCli 项目中默认是没有加载 worker 的配置，需要额外安装 webpack 插件来实现，让我们开始安装 worker-loader 插件

# npm
npm install worker-loader
# pnpm
pnpm install worker-loader
# yarn
yarn add worker-loader

配置Webpack插件

然后我们开始配置 vue.config.js 增加下面配置

{
   
   
	// ...
	chainWebpack: config => {
   
   
		// 配置 worker-loader 插件，匹配处理 *.worker.js 文件
		config.module.rule('worker')
	      .test(/\.worker\.js$/)
	      .use('worker-loader')
	      .loader('worker-loader')
	      .tap(() => ({
   
    worker: 'SharedWorker' })