vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)
vue3+vite+SQL.js讀取db3文件數(shù)據(jù)
最近遇到一個(gè)需求是讀取本地SQLite文件，還是花費(fèi)了點(diǎn)時(shí)間才實(shí)現(xiàn)，沒怎么看到vite方面寫這個(gè)的文章，現(xiàn)在分享出來完整流程。
Tips：解決了打包后wasm文件404問題，在后續(xù)
1.pnpm下載SQL.js(什么都可以下)
pnpm add SQL.js
2.【重點(diǎn)】如果你執(zhí)行wasm文件時(shí)報(bào)錯(cuò)404，請(qǐng)執(zhí)行：
pnpm add --save-dev @rollup/plugin-wasm
在vite.config,js中寫入：
...
build: {
rollupOptions: {
plugins: [
// 在這里添加 wasm 插件
wasm({
include: /\.wasm$/i // 這里可能需要調(diào)整為你的文件路徑和名稱
})
],
}
}
...
3.在使用的頁面中，你需要引入了，但是我在使用setup語法糖寫法時(shí)候報(bào)錯(cuò)，因?yàn)閳?zhí)行順序的問題，這里有兩種解決辦法；
第一種：不使用語法糖，使用setup()形式；
第二種：使用語法糖，結(jié)合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文件，觸發(fā)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數(shù)據(jù)庫的結(jié)構(gòu)：
我取其中的PhotoFile值(.ovr不用看，我自己加的)：
以上的操作在vue打包后再運(yùn)行會(huì)報(bào)錯(cuò)
因?yàn)閣asm文件沒有被打包進(jìn)去，經(jīng)過排查，主要是sql-wasm.wasm這個(gè)文件
1.將該文件復(fù)制出來，放在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.此時(shí)依舊會(huì)報(bào)錯(cuò)，需修改vite.config.js配置
添加
assetsInclude: ["**/*.wasm"] publicDir: "public", publicPath: "./", base: "/", // hash模式 ./ 歷史模式 /
總結(jié)
完美解決！
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue2老項(xiàng)目vite升級(jí)改造過程記錄
目前vite主要默認(rèn)是支持給vue3使用的,并且如果使用官方的cli創(chuàng)建的項(xiàng)目一樣會(huì)默認(rèn)使用vue3去構(gòu)建項(xiàng)目,此時(shí)對(duì)于一些vue2的老項(xiàng)目就顯得不友好了,下面這篇文章主要給大家介紹了關(guān)于vue2老項(xiàng)目vite升級(jí)改造的相關(guān)資料,需要的朋友可以參考下2022-12-12
Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue3實(shí)現(xiàn)地圖選點(diǎn)組件的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
vue監(jiān)聽對(duì)象及對(duì)象屬性問題
這篇文章主要介紹了vue監(jiān)聽對(duì)象及對(duì)象屬性問題,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)拖拽式分割布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue中使用?Aplayer?和?Metingjs?添加音樂插件的方式
這篇文章主要介紹了Vue中使用?Aplayer?和?Metingjs?添加音樂插件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了Vue中的前端crypto.js加解密問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
vuejs 制作背景淡入淡出切換動(dòng)畫的實(shí)例
今天小編就為大家分享一篇vuejs 制作背景淡入淡出切換動(dòng)畫的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue3 中的 hooks 就是函數(shù)的一種寫法，就是將文件的一些單獨(dú)功能的js代碼進(jìn)行抽離出來，放到單獨(dú)的js文件中，或者說是一些可以復(fù)用的公共方法/功能，這篇文章主要介紹了vue3中hooks的簡介及用法,需要的朋友可以參考下2023-01-01
這篇文章主要給大家介紹了關(guān)于Vue中加載天地圖的離線地圖的基本步驟,Vue天地圖離線地圖是指基于Vue框架開發(fā)的應(yīng)用程序,使用天地圖離線地圖服務(wù)提供商提供的地圖數(shù)據(jù),可以在沒有網(wǎng)絡(luò)的情況下使用地圖功能,需要的朋友可以參考下2023-10-10
這篇文章主要介紹了WebSocket使用以及在vue如何使用問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05