Vite/Vue3构建后Web Worker文件出现404 Not Found问题求助

问题说明 #

在基于通用模板创建的Vite项目中测试Web Worker，执行npm run dev时功能正常，但执行npm run build后，用http-server启动dist目录时出现错误：

"GET /workers/test.worker.ts" Error (404): "Not found"

项目仅新增了以下内容：

@/stores/counter.ts #

/* ... 默认Pinia仓库内部代码 ... */
function webworkerTest() {
    console.log("this is a test message, wahoo!!");
    const workerPath = "../workers/test.worker.ts";

    const worker = new Worker(new URL(workerPath, import.meta.url), {
      type: "module",
    }); 
// 注：此处设置和Vite文档一致，但如果不加{type: "module"}，构建后控制台会抛出"404 (Not Found)"，开发环境则会抛出"Unexpected token 'export'"

    console.log(workerPath, worker);
    worker.addEventListener("message", (message) => {
      console.log(message);
    });
    worker.postMessage("this is a test message to the worker");
  }
/* ... 将webworkerTest加入默认Pinia仓库的返回语句 ... */

@/workers/test.worker.ts #

console.log("hello from a webworker");

addEventListener("message", (message) => {
  console.log("in webworker", message);
  postMessage("this is the response " + message.data);
});

// 避免--isolatedModules编译错误
export {};

@/components/HelloWorld.vue #

<script setup lang="ts">
import { useCounterStore } from "@/stores/counter";
const counterStore = useCounterStore();
counterStore.webworkerTest(); // 触发Worker测试逻辑

defineProps<{
  msg: string;
}>();
</script>

项目配置选项 #

• Vue 3
• TypeScript
• Pinia
• ESLint
• Prettier

已尝试操作 #

• 调整test.worker.ts文件的存放位置，未解决问题

可行方案与疑问 #

尝试了Vite文档中的「带查询后缀的导入」方案，该方案在开发和构建环境下均能正常运行，但不清楚其工作原理，也不知道该搜索哪些内容进行深入学习。

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