typescript - วิธีการกำหนดค่าแอป Tarui เพื่ออ่านการตั้งค่า

ฉันต้องการเก็บการตั้งค่าผู้ใช้ของแอป Tauri ไว้ในไฟล์ภายนอก ส่วนหน้า TypeScript ทำดังนี้:

import {appConfigDir} from "tauri-apps/api/path";
...
await fetch(`${await appConfigDir()}symbol-sets.json`) {
    ...
}

โดยการล็อกไปที่คอนโซล ฉันสามารถเห็นว่ามันกำลังพยายามดึงข้อมูลจาก C:\Users\padeso\AppData\Roaming\padeso-svg-symbol-tool\symbol-sets.json

ใน tauri.conf.json ฉันได้เพิ่ม

"tauri": {
      "fs": {
        "readFile": true,
        "scope": ["$APPCONFIG/*"],
      },

ฉันไม่รู้ว่าจะยืนยันได้อย่างไรว่า Tauri กำลังตีความ "$APPCONFIG/*" อย่างไร แต่ตามที่ฉันอ่านเอกสาร ฉันคาดว่ามันจะถูกแก้ไขไปยังตำแหน่งเดียวกับโค้ด อย่างไรก็ตาม มันเกิดข้อผิดพลาด:

Not allowed to load local resource:
file:///C:/Users/padeso/AppData/Roaming/padeso-svg-symbol-tool/symbol-sets.json

ใครช่วยบอกฉันได้ไหมว่าฉันกำลังขาดอะไรอยู่?

คำตอบ #1

คุณได้ลองใช้การเรียก API readTextFile หรือยัง:

import { readTextFile, BaseDirectory } from '@tauri-apps/api/fs';
// Read the text file in the `$APPCONFIG/symbol-sets.conf` path
const contents = await readTextFile('symbol-sets.conf', { dir: BaseDirectory.AppConfig });
const symbolSets = JSON.parse(contents);
console.log(symbolSets);

คำตอบ #2

ในขณะที่วิธีการของ @DeveloperMindset.com ใช้งานได้ดี ผมก็สามารถทำให้มันใช้งานได้โดยใช้คำแนะนำของ @FabianLars เกี่ยวกับการจัดการไฟล์ภายนอกเป็นสินทรัพย์แทนที่จะเป็นไฟล์ นี่คือรายละเอียด เผื่อว่าจะเป็นประโยชน์กับคนอื่นๆ

แทนที่จะตั้งค่ารายการอนุญาตระบบไฟล์ใน tauri.conf.json ให้ตั้งค่ารายการอนุญาตโปรโตคอล:

"tauri": {
    "protocol": {
        "asset": true,
        "assetScope": ["$APPCONFIG/*]
    }
}

แล้วในส่วนหน้าเว็บไซต์ ให้รับ URL ของไฟล์/ทรัพยากร ดังนี้:

import {appConfigDir, join} from "@tauri-apps/api/path";
import {convertFileSrc} from "@tauri-apps/api/tauri";
...
const appConfigDirPath = await appConfigDir();
const configFilePath = await join(appConfigDirPath, 'symbol-sets.json');
const configUrl = convertFileSrc(configFilePath);

await fetch(configUrl, {mode: 'cors'}) {
    ...
}

โปรดทราบว่าคุณต้องระบุ CORS URL ในกรณีนี้ (บนระบบของฉัน) คือ https://asset.localhost/C%3A%5CUsers%5Cpadeso%5CAppData%5CRoaming%5Cpadeso-svg-symbol-tool%5Csymbol-sets.json