pnpm add SQL.js

pnpm add --save-dev @rollup/plugin-wasm

...
   build: {
    	rollupOptions: {
        plugins: [
          // 在這里添加 wasm 插件
          wasm({
            include: /\.wasm$/i // 這里可能需要調(diào)整為你的文件路徑和名稱
          })
        ],
	}
}
...

import { onMounted, nextTick, ref } from "vue";
import initSqlJs from "sql.js";
const databaseContent = ref(null);
let SQL, db;
onMounted(async (nextTick) => {
  SQL = await initSqlJs({
    locateFile: (file) => `/node_modules/sql.js/dist/${file}`
  });
  db = new SQL.Database();
});

 <input type="file" @change="onFileChange" />
    <div>
      <ul>
        <li v-for="(item, index) in databaseContent" :key="index">
          {{ item }}
        </li>
      </ul>
    </div>

const onFileChange = (event) => {
  const fileInput = event.target;
  const file = fileInput.files[0];

  if (file) {
    const reader = new FileReader();
    reader.onload = () => {
      const Uints = new Uint8Array(reader.result);
      db = new SQL.Database(Uints);
      const result = db.exec("SELECT PhotoFile  FROM Photo");
      if (result && result.length) {
        let table = result[0].values.flat().map((str) => {
          let newRow = str.replace(".\\", "");
          let newOvrRow = newRow + ".ovr";
          return [newRow, newOvrRow];
        });
        databaseContent.value = table.flat();
      }
    };
    reader.readAsArrayBuffer(file);
  }
};

 const Uints = new Uint8Array(reader.result);
  db = new SQL.Database(Uints);
  const result = db.exec("SELECT PhotoFile  FROM Photo");
  ...
  reader.readAsArrayBuffer(file);

import sqlWasm from "/vender/sql-wasm.wasm";
onMounted(async (nextTick) => {
  SQL = await initSqlJs({
    locateFile: (file) => sqlWasm
  });
});

assetsInclude: ["**/*.wasm"]
publicDir: "public",
publicPath: "./",
base: "/", //   hash模式 ./ 歷史模式 /