如何在Vanilla JS项目中使用Dexie-Cloud插件？

当然可以在Vanilla JS页面中成功使用Dexie-Cloud，下面是两种经过验证的实现方式，以及你之前尝试可能踩坑的地方：

方法一：UMD脚本引入（兼容传统浏览器） #

注意必须先引入Dexie的UMD包，再引入Dexie-Cloud的UMD包，否则全局变量会找不到。完整代码示例：

<script src="https://unpkg.com/dexie@4.0.8/dist/umd/dexie.js"></script>
<script src="https://unpkg.com/dexie-cloud-addon@4.0.8/dist/umd/dexie-cloud-addon.js"></script>
<script>
  // 初始化带云插件的数据库
  const db = new Dexie('MyCloudDB', {
    addons: [DexieCloud] // UMD引入后，DexieCloud会挂载到window全局
  });

  // 定义表结构
  db.version(1).stores({
    tasks: 'id++, title, done'
  });

  // 配置你的Dexie-Cloud实例
  db.cloud.configure({
    databaseUrl: 'https://你的Dexie-Cloud实例地址',
    requireAuth: true // 根据业务需求设置是否强制认证
  });

  // 测试数据操作
  async function testCloudDB() {
    try {
      await db.tasks.add({ title: '测试Dexie-Cloud', done: false });
      const allTasks = await db.tasks.toArray();
      console.log('当前任务列表:', allTasks);
    } catch (err) {
      console.error('操作失败:', err);
    }
  }
  testCloudDB();
</script>

方法二：ES模块方式（现代浏览器推荐） #

需要确保引入的是ES模块版本的包（后缀为.mjs），而不是UMD版本。完整代码示例：

<script type="module">
  import Dexie from 'https://unpkg.com/dexie@4.0.8/dist/dexie.mjs';
  import { DexieCloud } from 'https://unpkg.com/dexie-cloud-addon@4.0.8/dist/dexie-cloud-addon.mjs';

  // 初始化数据库并集成云插件
  const db = new Dexie('MyCloudDB', {
    addons: [DexieCloud]
  });

  db.version(1).stores({
    tasks: 'id++, title, done'
  });

  // 配置云服务
  db.cloud.configure({
    databaseUrl: 'https://你的Dexie-Cloud实例地址',
    requireAuth: true
  });

  // 立即执行测试
  (async () => {
    try {
      await db.tasks.add({ title: '基于ES模块的测试', done: false });
      const tasks = await db.tasks.toArray();
      console.log('模块方式任务列表:', tasks);
    } catch (err) {
      console.error('模块方式操作失败:', err);
    }
  })();
</script>

常见问题排查 #

• 版本不兼容：必须保证Dexie和Dexie-Cloud的版本完全匹配，比如都用4.0.8，避免因版本差异导致的API不兼容
• CORS限制：如果你的页面域名不在Dexie-Cloud后台的允许列表中，会出现跨域错误，需要在Dexie-Cloud控制台配置允许的Origin
• 低代码工具限制：部分低代码平台会拦截外部脚本或模块请求，需要确认平台是否允许加载unpkg的资源，或者是否需要将脚本上传到平台内部资源库
• 认证问题：如果开启了requireAuth: true，需要调用db.cloud.login()处理用户登录，否则数据库操作会被拦截

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