Vue 3 + Capacitor 使用jeep-sqlite，web端使用本地sqlite数据库

1.用途，前端浏览器调用数据库，或者要做安卓打包但是懒得总是真机调试数据库

2.下载包，目前使用的是2.8.0版本

复制代码

npm install jeep-sqlite

3.在node_modules中找到这个包，将其整体复制到public文件夹下的assets中，

4.打开该包的readme有如下解释意思是出现x is not a function报错就找到node_modules中的node_modules/sql.js/dist/sql-wasm.wasm的wasm文件也复制到public文件夹下的assets中，

```

I am getting the following error in console in ionic Application.

Error: Uncaught (in promise): TypeError: x is not a function

TypeError: x is not a function

at x (jeep-sqlite.entry.js:2648:80)

at f.onRuntimeInitialized (jeep-sqlite.entry.js:2555:318)

...

```

means that you have to copy the sql-wasm.wasm from node_modules/sql.js/dist/sql-wasm.wasm to your application assets directory

!!!!!!!!!!!!!!!!!!!!!!!!!!

5.设置index.html中给jeep-sqlite引入的model的结点

复制代码

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta
    http-equiv="Content-Security-Policy"
    content="default-src 'self' 'unsafe-inline' 'unsafe-eval' blob: data: file: app:;
             img-src 'self' data: blob: file: app: http: https:;
             style-src 'self' 'unsafe-inline';
             script-src 'self' 'unsafe-eval' 'unsafe-inline' ;
            script-src-elem 'self' 'unsafe-eval' 'unsafe-inline' https://fastly.jsdelivr.net;
             connect-src 'self' ws: wss: http: https:;
             font-src 'self' data:;
             media-src 'self' data: blob:;"
  />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"></div>
      <!-- 先加载本地 jeep-sqlite，再加载主应用 -->
      <jeep-sqlite autoSave="true" ></jeep-sqlite>
      <!-- <script src='/node_modules/jeep-sqlite/dist/jeep-sqlite/jeep-sqlite.esm.js'></script> -->
      <script type="module" src="/public/assets/jeep-sqlite/dist/jeep-sqlite/jeep-sqlite.esm.js"></script>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

6.main.js配置

主要为

复制代码

import 'jeep-sqlite';

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'


import {capacitorAPI} from './server/db/capacitorAPI.js';
import dbManager from './server/db/db.js';
// import '@/assets/styles/main.css';
//引入
import 'jeep-sqlite';

const app = createApp(App)
const pinia = createPinia()
app.use(pinia)
app.use(router)
 
;


(async () => {
    try {
     
      // if(!isElectron()){
    //进入initialize方法该方法使用了jeepsqlite
   await dbManager.initialize();

      window.capacitorAPI = capacitorAPI;
      // }
     
      app.mount('#app');
    //    setRoot()
      console.log("app已经化")
    } catch (error) {
      console.error('应用启动失败:', error);
     
      document.body.innerHTML = `<h1>应用初始化失败</h1>`;
    }
  
  })();

7.使用，配套了Capacitor社区对sqlite的支持

复制代码

import { Capacitor } from '@capacitor/core';
import { CapacitorSQLite, SQLiteConnection } from '@capacitor-community/sqlite';
const DB_NAME = 'clothes.db';
class DatabaseManager {
  constructor() {
    this.sqlite = new SQLiteConnection(CapacitorSQLite);
    this.connection = null;      // 插件连接对象
    this.db = null;              // 实际数据库操作对象
    this.repositories = {};
    this.initialized = false;
  }
  // 异步初始化数据库
  async initialize() {
    if (this.initialized) return;
//获取当前环境是桌面端，安卓端，或是web
const platform = Capacitor.getPlatform();

    try {

         if (platform === 'web') {
          //如果是web那么使用jeepsqlite，如果前面没有复制不会报错，但是一直await会白屏
      await customElements.whenDefined('jeep-sqlite');
  
      let jeepSqliteEl = document.querySelector('jeep-sqlite');
    
      if (!jeepSqliteEl) {
        jeepSqliteEl = document.createElement('jeep-sqlite');
        document.body.appendChild(jeepSqliteEl);

      } else {

      }
      await this.sqlite.initWebStore();
 
    }


//一些数据库操作略


      // 1. 创建数据库连接
      await this.sqlite.createConnection(DB_NAME, false, 'no-encryption', 1);
      this.connection = await this.sqlite.retrieveConnection(DB_NAME);
      this.db = this.connection; // 便于使用


      // 2. 打开数据库
      await this.db.open();

      // 3. 启用外键约束（如果需要）
      await this.db.execute('PRAGMA foreign_keys = ON;');

      // 4. 创建表结构
      await this.createTables();

      // 5. 初始化默认分组
      await this.initDefaultGroups();

      // 6. 初始化 Repositories（此时 db 已就绪）
      this.initRepositories();
  
      this.initialized = true;
 
    } catch (error) {
      console.error('数据库初始化失败:', error);
      throw error;
    }
  }
}
const dbManager = new DatabaseManager();
export default dbManager;