vue3连接sqlite数据库

### Vue3 中连接 SQLite 数据库

在前端框架如 Vue3 中直接操作数据库并不是常见的做法，因为通常数据库交互是在服务器端完成的。然而，在某些特定情况下，比如构建桌面应用或是离线优先的应用程序时，可以在客户端使用 SQLite。

对于 Web 应用来说，浏览器环境并不支持直接访问文件系统中的 SQLite 文件，因此无法通过常规方式建立与本地 SQLite 的连接[^1]。但是可以考虑以下几种替代方案：

#### 使用 Electron 构建桌面应用程序

Electron 是一个允许开发者创建跨平台桌面应用程序的技术栈，它结合了 Chromium 和 Node.js。在这种环境中可以直接利用 Node.js 模块来实现对 SQLite 数据库的操作。

安装必要的 npm 包：

npm install sqlite3 electron --save

编写简单的示例代码用于打开并查询 SQLite 数据库：

const { app, BrowserWindow } = require('electron');
const path = require('path');
const sqlite3 = require('sqlite3').verbose();

// 创建窗口...
app.whenReady().then(() => {
    const win = new BrowserWindow({
        webPreferences: {
            preload: path.join(__dirname, 'preload.js')
        }
    });

    let db = new sqlite3.Database(':memory:');
    
    db.serialize(function() {
      db.run("CREATE TABLE lorem (info TEXT)");

      let stmt = db.prepare("INSERT INTO lorem VALUES (?)");
      for (let i = 0; i < 10; i++) {
          stmt.run("Ipsum " + i);
      }
      stmt.finalize();

      db.each("SELECT rowid AS id, info FROM lorem", function(err, row) {
          console.log(row.id + ": " + row.info);
      });
    });

    db.close();
});

此方法适用于需要打包成独立可执行文件的应用场景下运行于用户的计算机上而不是传统的基于Web的服务部署模式中。

#### 利用 IndexedDB 或者其他 Web 存储 API

如果目标是纯网页版应用，则可以选择内置的支持更好的存储机制——IndexedDB 来代替 SQLite 实现相似功能。虽然这不是严格意义上的 “连接到 SQLite”，但对于大多数需求而言已经足够强大，并且完全兼容现代浏览器标准。