vue3+vite+SQL.js如何讀取db3文件數(shù)據(jù)
vue3+vite+SQL.js讀取db3文件數(shù)據(jù)
最近遇到一個需求是讀取本地SQLite文件，還是花費了點時間才實現(xiàn)，沒怎么看到vite方面寫這個的文章，現(xiàn)在分享出來完整流程。
Tips：解決了打包后wasm文件404問題，在后續(xù)
1.pnpm下載SQL.js(什么都可以下)
pnpm add SQL.js
2.【重點】如果你執(zhí)行wasm文件時報錯404，請執(zhí)行：
pnpm add --save-dev @rollup/plugin-wasm
在vite.config,js中寫入：
...
build: {
rollupOptions: {
plugins: [
// 在這里添加 wasm 插件
wasm({
include: /\.wasm$/i // 這里可能需要調(diào)整為你的文件路徑和名稱
})
],
}
}
...
3.在使用的頁面中，你需要引入了，但是我在使用setup語法糖寫法時候報錯，因為執(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打包后再運行會報錯
因為wasm文件沒有被打包進去，經(jīng)過排查，主要是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模式 ./ 歷史模式 /
總結(jié)
完美解決！
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue3+vant4封裝日期時間組件方式(年月日時分秒),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
如何在Vue3中實現(xiàn)文件上傳功能結(jié)合后端API
文件上傳的功能實現(xiàn)是我們做Web應用時候最為常見的應用場景,下面這篇文章主要給大家介紹了關于如何在Vue3中實現(xiàn)文件上傳功能結(jié)合后端API的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-09-09
下面小編就為大家分享一篇解決vue單頁使用keep-alive頁面返回不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03![Vue請求代理地址localhost報錯：[HPM] Error occurred while trying to proxy request的解決方案](http://img.jbzj.com/images/xgimg/bcimg3.png)
Vue請求代理地址localhost報錯：[HPM] Error occurred whi
這篇文章主要介紹了在前后端聯(lián)調(diào)測試Vue時遇到的請求超時問題,通過排查發(fā)現(xiàn)是由于Vue請求的后端服務只監(jiān)聽了IPv4,而Vue發(fā)送的localhost地址請求被解析為IPv6的回環(huán)地址導致的,通過修改hosts文件將localhost改為127.0.0.1,并將Vue代理請求更換成127.0.0.1,解決了問題2026-02-02
這篇文章主要介紹了vue相關配置文件詳解及多環(huán)境配置的教程，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了vue上傳圖片到oss的方法示例（圖片帶有刪除功能），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
在Vue.js中頁面跳轉(zhuǎn)是前端開發(fā)中常見的需求,Vue提供了多種頁面跳轉(zhuǎn)方式,這篇文章主要給大家介紹了關于vue跳轉(zhuǎn)方式的常見方式以及區(qū)別分析的相關資料,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vue父元素點擊事件與子元素點擊事件沖突問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
Vue項目的甘特圖組件之dhtmlx-gantt使用教程和實現(xiàn)效果展示(推薦)
文章介紹了如何使用dhtmlx-gantt組件來實現(xiàn)公司的甘特圖需求,并提供了一個簡單的Vue組件示例,文章還分享了一些配置項,如格式化表頭日期、設置甘特圖尺寸、啟用只讀模式、設置表格列等,感興趣的朋友一起看看吧2025-02-02
vue中數(shù)據(jù)字典dicts的簡單說明和用法介紹
這篇文章主要給大家介紹了關于vue中數(shù)據(jù)字典dicts的簡單說明和用法的相關資料,如果您想在Vue中使用字典查詢,您可以使用Vue的計算屬性和方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-01-01