Electron 访问文件 | Quasar 框架

使用 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')

如果您在预加载脚本中导入 @electron/remote，请记住您需要在 electron-main.js 中设置以下内容，您在其中实例化 BrowserWindow

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

访问公共文件夹

如果由于某种原因，您在 /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. 访问公共文件夹