Vue Vite TS项目用sql.js连接db.sqlite报错，求解决方法

你的错误根源有两个：

1. locateFile参数用错了：这个参数是用来指定sql.js自身依赖的sql-wasm.wasm文件路径，不是你的本地sqlite数据库文件。你把它指向了db.sqlite，导致sql.js尝试把数据库文件当成wasm解析，自然报魔法字不匹配的错误。
2. 没有正确加载本地sqlite文件：你直接new SQL.Database()创建的是空数据库，根本没读取你本地的db.sqlite。

正确操作步骤 #

1. 先处理sql.js的wasm文件加载 #

在Vue Vite项目中，sql.js的wasm文件会随npm包一起安装，默认路径是node_modules/sql.js/dist/sql-wasm.wasm。你需要正确配置locateFile指向这个文件：

import initSqlJs from "sql.js";

// 正确指定wasm文件路径
initSqlJs({
  locateFile: (file) => {
    // Vite会处理静态资源加载，直接返回文件名即可
    return `/${file}`;
  },
}).then(async (SQL) => {
  // 加载本地sqlite数据库文件
  const response = await fetch("/db.sqlite");
  const buffer = await response.arrayBuffer();
  // 用读取到的buffer初始化数据库
  const db = new SQL.Database(new Uint8Array(buffer));
  
  // 可执行测试查询验证加载结果
  const testResult = db.exec("SELECT * FROM your_table_name");
  console.log(testResult);
});

2. 确保本地db.sqlite文件的位置 #

把db.sqlite放在项目的public目录下，这样Vite会把它作为静态资源处理，才能通过fetch("/db.sqlite")正常访问。

3. Vite额外配置（解决可能的MIME类型错误） #

如果仍报wasm MIME类型相关错误，在vite.config.ts中添加以下配置：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    headers: {
      "Cross-Origin-Embedder-Policy": "require-corp",
      "Cross-Origin-Opener-Policy": "same-origin",
    },
  },
  optimizeDeps: {
    exclude: ["sql.js"],
  },
});

配置完成后，sql.js就能正确加载依赖的wasm文件，同时你的本地sqlite数据库也能被正常读取和初始化。

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