Vue+Vite开发组件库时Web Worker生产构建路径错误如何解决？

开发Vue.js组件库时使用Vite作为构建工具，开发模式下Web Worker加载正常，路径为http://localhost:5173/src/components/datatable/workerCreateDatatableList.js?type=module&worker_file=，但将库导入其他项目做生产构建时，Worker路径错误——实际文件位于node_modules/cp/assets目录，构建后路径却变成http://localhost:3000/assets/workerRegroupWorker-7b23b61a.js，导致加载失败。

项目结构 #

- cp
  - package.json
  - vite.config.ts
  - src
    - components
      - datatable
        - dt.vue
        - workerCreateDatatableList.js（在dt.vue中导入）
        - workerRegroupWorker.js（在dt.vue中导入）
        - workerSelectRows.js（在dt.vue中导入）

相关配置 #

package.json #

{
  "name": "cp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "files": ["dist"],
  "main": "./dist/lib.umd.cjs",
  "module": "./dist/lib.js",
  "exports": {
    ".": {
      "import": "./dist/lib.js",
      "require": "./dist/lib.umd.cjs"
    }
  },
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "node-sass": "^9.0.0",
    "primevue": "^3.31.0",
    "sass": "^1.64.1",
    "sass-loader": "^13.3.2",
    "vue": "^3.3.4",
    "vue-router": "4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "typescript": "^5.0.2",
    "vite": "^4.4.5",
    "vue-tsc": "^1.8.5"
  }
}

vite.config.ts #

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'libmain.js'),
      name: 'improvizelib',
      fileName: 'lib',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
      },
    },
  },
})

dt.vue中的Worker导入代码 #

const createDatatableList = new Worker(new URL("./workerCreateDatatableList.js?worker", import.meta.url ), {
  type: 'module',
});
const regroupWorker = new Worker(new URL("./workerRegroupWorker.js?worker", import.meta.url ), {
  type: 'module',
});
const workerSelectRows = new Worker(new URL("./workerSelectRows.js?worker", import.meta.url ));

尝试过直接使用相对路径导入，但未解决问题：

const createDatatableList = new Worker("./workerCreateDatatableList.js?worker", {
  type: 'module',
});

要解决生产构建时Worker路径错误的问题，需从Vite配置和Worker导入方式两方面调整：

1. 修改Vite构建配置，确保Worker资源被正确打包 #

在vite.config.ts的build配置中添加资源处理规则，确保Worker文件作为独立资源输出到dist/assets目录，同时避免被内联：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: resolve(__dirname, 'libmain.js'),
      name: 'improvizelib',
      fileName: 'lib',
    },
    rollupOptions: {
      external: ['vue'],
      output: {
        globals: {
          vue: 'Vue',
        },
        // 指定Worker资源的输出路径规则
        assetFileNames: 'assets/[name]-[hash][extname]',
        // 将Worker文件单独打包为一个chunk
        manualChunks: (id) => {
          if (id.includes('worker')) {
            return 'worker'
          }
        }
      },
    },
    // 禁用资源内联，确保Worker文件以独立文件输出
    assetsInlineLimit: 0,
  },
})

2. 规范Worker导入方式，保留import.meta.url解析 #

保持new URL(..., import.meta.url)的导入方式（这是Vite推荐的静态资源解析方案），同时统一添加type: 'module'参数，确保语法一致性：

// dt.vue中修改后的Worker导入代码
const createDatatableList = new Worker(new URL('./workerCreateDatatableList.js', import.meta.url), {
  type: 'module',
});
const regroupWorker = new Worker(new URL('./workerRegroupWorker.js', import.meta.url), {
  type: 'module',
});
const workerSelectRows = new Worker(new URL('./workerSelectRows.js', import.meta.url), {
  type: 'module',
});

3. 确保组件库打包资源完整 #

执行npm run build后，检查dist目录下是否生成assets文件夹并包含对应Worker文件。由于package.json的files字段已包含dist，其他项目导入该库时，Vite会自动将dist/assets下的Worker资源复制到项目构建目录，并修正引用路径。

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