解决Evolu项目中Db.worker.js加载失败的问题

在基于Evolu框架开发Todo应用时，开发者可能会遇到一个常见问题：系统提示"Db.worker not found"错误。这个问题通常发生在初始化数据库阶段，表现为浏览器控制台报错404，无法找到Db.worker.js文件。

问题根源分析

这个问题的根本原因与Vite的依赖优化机制有关。Evolu框架内部使用了Web Worker来处理数据库操作，而Vite默认会对依赖进行优化打包。当Vite尝试优化@evolu/common-web或@evolu/web模块时，会导致Worker文件的路径解析出现错误。

解决方案

在Vite配置文件中添加以下优化配置即可解决：

// vite.config.ts
export default defineConfig({
  optimizeDeps: {
    exclude: ['@evolu/web'] // 或 '@evolu/common-web'，取决于使用的包版本
  }
})

完整配置建议

为了确保Evolu框架正常工作，建议采用以下完整的Vite配置：

import { defineConfig } from 'vite'

export default defineConfig({
  optimizeDeps: {
    exclude: ['@evolu/web']
  },
  worker: {
    format: 'es'
  },
  preview: {
    headers: {
      'Cross-Origin-Opener-Policy': 'same-origin',
      'Cross-Origin-Embedder-Policy': 'require-corp'
    }
  }
})

技术原理

1. optimizeDeps.exclude：告诉Vite跳过对指定模块的优化，保持其原始结构，确保Worker文件能够正确加载
2. worker.format：确保Worker以ES模块格式加载
3. 预览服务器头设置：为SQLite在OPFS(Origin Private File System)中正常工作提供必要的安全策略

注意事项

不同版本的Evolu可能使用不同的包名：

• 较新版本使用@evolu/web
• 旧版本可能使用@evolu/common-web

开发者应根据实际使用的包版本来调整exclude配置。如果遇到类似问题，可以检查Vite构建日志，通常会给出明确的提示，指导应该排除哪个模块。

通过以上配置调整，Evolu框架的数据库Worker就能正常加载，Todo应用的基础功能也可以顺利运行了。