Electron 存取檔案 | Quasar Framework

具有 Webpack 的 Quasar CLI - @quasar/app-webpack

Electron 存取檔案

使用 dirname & filename

由於主進程是使用 webpack 打包的，因此在生產環境中使用 __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')

如果您在 preload 腳本中導入 @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 資料夾