我要评论vue3+vite+sql.js读取db3文件数据
最近遇到一个需求是读取本地sqlite文件，还是花费了点时间才实现，没怎么看到vite方面写这个的文章，现在分享出来完整流程。
tips：解决了打包后wasm文件404问题，在后续
1.pnpm下载sql.js(什么都可以下)
pnpm add sql.js
2.【重点】如果你执行wasm文件时报错404，请执行：
pnpm add --save-dev @rollup/plugin-wasm
在vite.config,js中写入：
...
build: {
rollupoptions: {
plugins: [
// 在这里添加 wasm 插件
wasm({
include: /\.wasm$/i // 这里可能需要调整为你的文件路径和名称
})
],
}
}
...
3.在使用的页面中，你需要引入了，但是我在使用setup语法糖写法时候报错，因为执行顺序的问题，这里有两种解决办法；
第一种：不使用语法糖，使用setup()形式；
第二种：使用语法糖，结合onmounted，nexttick解决，以下：
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();
});
4.添加选择文件控件，选择.db3文件，触发onfilechange 方法
<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);
这是db3数据库的结构：
我取其中的photofile值(.ovr不用看，我自己加的)：
以上的操作在vue打包后再运行会报错
因为wasm文件没有被打包进去，经过排查，主要是sql-wasm.wasm这个文件
1.将该文件复制出来，放在public下，我的路径是public-vender-sql-wasm.wasm
2.import引入该文件
import sqlwasm from "/vender/sql-wasm.wasm";
onmounted(async (nexttick) => {
sql = await initsqljs({
locatefile: (file) => sqlwasm
});
});
3.此时依旧会报错，需修改vite.config.js配置
添加
assetsinclude: ["**/*.wasm"] publicdir: "public", publicpath: "./", base: "/", // hash模式 ./ 历史模式 /
总结
完美解决！
以上为个人经验，希望能给大家一个参考，也希望大家多多支持代码网。
发表评论