使用Laravel@10.13.5与vite@^4.0.0时出现Failed to construct 'Worker'错误

问题根源 #

这个错误是**跨源资源共享（CORS）**限制导致的：Laravel开发服务器运行在http://127.0.0.1:8000，而Vite开发服务器默认在http://127.0.0.1:5173。当Worker脚本从Vite的5173端口加载时，浏览器会因为源不同阻止访问。

解决方案 #

1. 开发环境：统一资源访问源 #

在vite.config.js中配置server.origin，让Vite生成的所有资源URL指向Laravel的服务端地址，彻底避免跨源问题：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
    server: {
        // 与Laravel开发服务器的地址保持一致
        origin: 'http://127.0.0.1:8000',
    },
});

修改后重启Vite和Laravel服务，Worker脚本会从8000端口加载，不再触发跨源错误。

2. 正确导入Worker（自定义/第三方） #

如果是你自己编写的Worker，或者需要引入第三方包中的Worker，使用Vite的官方Worker导入语法，确保Vite正确打包处理：

自定义Worker示例

// 在resources/js/app.js中
// 使用?worker后缀告诉Vite这是一个Worker脚本
import MyWorker from './workers/my-worker.js?worker';

// 创建Worker实例
const worker = new MyWorker();

第三方包Worker处理

如果第三方包依赖Worker，在vite.config.js中添加Worker相关配置，确保Vite能正确解析打包：

export default defineConfig({
    // ...其他配置
    worker: {
        format: 'es', // 使用ES模块格式
        plugins: [laravel()], // 让Laravel插件处理Worker资源
    },
    optimizeDeps: {
        // 如果第三方包未被自动优化，手动添加到依赖预构建列表
        include: ['your-third-party-package'],
    },
});

3. 生产环境验证 #

生产环境下Vite会将所有资源（包括Worker）打包到public/build目录，资源URL会自动指向Laravel的域名，不会出现跨源问题。部署前可以执行npm run build，检查public/build目录下是否生成了Worker相关的打包文件。

内容的提问来源于stack exchange，提问作者Ab.rezaei