vue2.x项目没有vue.config.js时,web worker使用

vue及插件版本信息

vue:2.7.14,webpack 3.6.0构建项目

情况描述

在vue中使用new Worker(‘./worker.js’)原生方法,引入woker.js子线程时,无法正常读取引入。于是乎就百度了一下,网上vue使用web worker的步骤。
1.安装使用 worker-loader

// 安装依赖包
npm install worker-loader -D

2.vue.config.js 完整配置

module.exports = {
chainWebpack(config) {
// set worker-loader
config.module
.rule(‘worker’)
.test(/.worker.js$/)
.use(‘worker-loader’)
.loader(‘worker-loader’)
.end();
},
parallel: false
}

3.将子线程js改成,woker.js后缀的,如demo.woker.js

import MyWorker from ‘./demo.worker.js’
new MyWorker()

然后就能愉快的使用了,但是由于我的项目中没有vue.config.js,于是乎我就完美的卡死在了第二步。

为什么没有vue.config.js

如果你vue2.x项目看多了,你会发vue中的配置文件有两种类型。
1.根目录下有config文件夹,且里面有index.js文件
2.根目录下有vue.config.js文件
那么问题就来了,为什么同为vue2.x的项目,却有着两种不同的配置文件呢?
这个问题之前一直困扰了我很久,刚开始以为是vue版本问题,最近才真正弄明白。

其实真正的原因是vue项目的构建访视不同,从而导致的配置文件的不同
1.vue init webpack 项目名称
使用该命令构建vue项目会出现config/index.js配置文件

2.vue create 项目名称
使用该命令构建vue项目会出现vue.config.js配置文件

解决方式

我在网上找了特别多的文章,基本上都需要配置vue.config.js文件。
在我一天的不懈努力下(与chatGPT对线)。终于在失败了n次后,找到了正确的解决方式

1.安装worker-loader的0.8.8版本
注意必须是低版本的,否则后面对webpack的配置会报错,如果你已经安装了高版本的,建议先卸载

	npm install worker-loader@0.0.8 --save-dev

2.在webpack.base.conf.js文件中添加如下配置

 module: {
    rules: [
      {
        test: /\.worker\.js$/,
        use: { loader: 'worker-loader' }
      }
    ]

然后重跑一下项目,就能愉快的使用web worker了!!!

  • 2
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值