Vue3 CLI项目中如何在js格式webworker文件内使用axios？

报错是因为默认创建的Web Worker运行在非ES模块模式下，原生不支持import语法，同时需要调整Vue CLI的worker加载规则适配模块导入需求。

步骤1：调整Web Worker注册代码 #

在你注册worker的Vue组件/业务代码中，修改实例化Worker的代码，添加模块声明配置：

// 替换你原来的 new Worker 写法
const testWorker = new Worker(new URL('./webworker.js', import.meta.url), {
  type: 'module'
})

其中type: 'module'参数会告诉浏览器将该worker视为ES模块处理，支持import导入语句。

步骤2：正常在webworker中导入使用axios #

修改完注册代码后，你就可以在webworker.js中正常使用axios导入和调用逻辑，示例代码如下：

// webworker.js
import axios from 'axios'

// 监听主线程消息
self.onmessage = async (event) => {
  if (event.data.action === 'REQUEST') {
    // 直接调用axios发起请求
    const result = await axios.get('你的请求接口地址')
    // 把结果返回给主线程
    self.postMessage(result.data)
  }
}

步骤3：低版本Vue CLI兼容处理 #

如果你使用的是Vue CLI 4及以下版本，上述配置仍报错的话，需要额外添加worker打包规则：

• 首先安装worker-loader依赖：

  npm install worker-loader -D
  

• 然后在项目根目录的vue.config.js中添加配置：

  module.exports = {
    configureWebpack: {
      module: {
        rules: [
          {
            test: /\.worker\.js$/,
            use: {
              loader: 'worker-loader',
              options: {
                esModule: true
              }
            }
          }
        ]
      }
    }
  }
  

配置完成后重启项目即可正常运行。

内容的提问来源于stack exchange，提问作者villanuevaquelin