Electron 存取檔案 | Quasar Framework

Quasar CLI with Vite - @quasar/app-vite

Electron 存取檔案

使用 dirname & filename

由於主程序是使用 Esbuild 打包的，因此在生產環境中使用 __dirname 和 __filename 將不會提供預期的值。參考檔案樹狀結構，您會注意到在生產環境中，electron-main.js 和 electron-preload.js 檔案會放置在 dist/electron-* 資料夾中。基於此知識，請相應地使用 __dirname 和 __filename。

app.asar/

dist/

electron-*/

js/...

icons/

node_modules/

index.html

package.json

electron-main.js

electron-preload.js

.../public 的內容

讀取與寫入本地檔案

使用 Electron 的一個巨大好處是能夠存取使用者的檔案系統。這使您能夠在本地系統上讀取和寫入檔案。為了幫助避免 Chromium 限制並寫入到您的應用程式內部檔案，請確保使用 electron 的 API，特別是 app.getPath(name) 函數。此輔助方法可以讓您取得系統目錄的檔案路徑，例如使用者的桌面、系統臨時檔案等。

我們可以使用 userData 目錄，該目錄專門為我們的應用程式保留，因此我們可以確信其他程式或其他使用者互動不應篡改此檔案空間。

準備

您將需要在您的應用程式中安裝 @electron/remote 依賴項

Yarn

NPM

PNPM

Bun

$ yarn add @electron/remote

然後，在您的 src-electron/electron-main.js 檔案中，對這些行進行一些編輯

import { app, BrowserWindow, nativeTheme } from 'electron'
import { initialize, enable } from '@electron/remote/main' // <-- add this
import path from 'path'

initialize() // <-- add this

// ...

mainWindow = new BrowserWindow({
  // ...
  webPreferences: {
    sandbox: false // <-- to be able to import @electron/remote in preload script
    // ...
  }
})

enable(mainWindow.webContents) // <-- add this

mainWindow.loadURL(process.env.APP_URL)

// ...

用法

最後，這是一個如何存取檔案的範例

import path from 'path'
import { app } from '@electron/remote'

const filePath = path.join(app.getPath('userData'), '/some.file')

如果您在預載腳本中導入 @electron/remote，請記住您需要在實例化 BrowserWindow 的 electron-main.js 中設定以下內容

mainWindow = new BrowserWindow({
  // ...
  webPreferences: {
    // ...
    sandbox: false // <-- to be able to import @electron/remote in preload script
  }
}

存取 Public 資料夾

如果由於某種原因，您有重要的檔案儲存在 /public 資料夾中，您也可以透過遵循以下程式碼來存取它們。要了解為什麼您需要以這種方式存取它們，請閱讀上面的「使用 __dirname & __filename」章節。

import path from 'path'

const publicFolder = path.resolve(__dirname, process.env.QUASAR_PUBLIC_FOLDER)

發現錯誤？在瀏覽器中編輯此頁面

1. 簡介

2. 使用 __dirname & __filename

3. 讀取與寫入本地檔案

3.1. 準備

3.2. 用法

4. 存取 Public 資料夾