Vite Vue Ionic Capacitor 5项目Web端jeep-sqlite.entry.js缺失问题

核心原因 #

浏览器环境下，@capacitor-community/sqlite依赖jeep-sqlite组件提供Web端SQLite支持，但Vite默认打包配置未正确处理该组件的资源引用，导致脚本文件无法加载，进而initWebStore无法执行。

具体解决方案 #

1. 在index.html中直接引入jeep-sqlite脚本 #

在项目根目录的index.html的<head>标签内添加对应版本的jeep-sqlite模块脚本（版本需与你安装的@capacitor-community/sqlite兼容）：

<script type="module" src="https://cdn.jsdelivr.net/npm/@jeep-sqlite/jeep-sqlite@2.5.2/dist/jeep-sqlite/jeep-sqlite.esm.js"></script>

添加后重启Vite开发服务，浏览器会直接从CDN加载所需脚本，无需依赖本地打包处理。

2. 配置Vite正确解析jeep-sqlite资源 #

如果不想使用CDN，修改vite.config.js，添加对jeep-sqlite的优化配置：

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

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['@jeep-sqlite/jeep-sqlite']
  },
  resolve: {
    alias: {
      '@jeep-sqlite/jeep-sqlite': '@jeep-sqlite/jeep-sqlite/dist/jeep-sqlite/jeep-sqlite.esm.js'
    }
  }
})

配置完成后执行npm run dev重启服务，Vite会正确识别并打包jeep-sqlite的资源文件。

3. 调整初始化代码的执行顺序 #

确保jeep-sqlite脚本加载完成后再执行初始化逻辑，可将代码包裹在DOMContentLoaded事件中：

document.addEventListener('DOMContentLoaded', async () => {
  await applyPolyfills();
  jeepSqlite(window);

  const jeepEl = document.createElement("jeep-sqlite");
  document.body.appendChild(jeepEl);
  
  await customElements.whenDefined("jeep-sqlite");
  await this.state.dbdriver.initWebStore();
});

避免因DOM未完全加载或脚本未就绪导致的组件注册失败。

验证方法 #

修改后在浏览器中打开开发者工具，查看网络请求，确认jeep-sqlite.esm.js（或对应脚本）已成功加载，再执行初始化逻辑，即可完成initWebStore步骤。

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