使用 __dirname 和 __filename(Using __dirname & __filename)

¥Using __dirname & __filename

由于主进程使用 Esbuild 打包，因此在生产环境中使用 __dirname 和 __filename 不会达到预期效果。查看文件树，你会注意到在生产环境中，electron-main.js 和 electron-preload.js 文件位于 dist/electron-* 文件夹中。基于此知识，请相应地使用 __dirname 和 __filename。

¥Since the main process is bundled using Esbuild, the use of __dirname and __filename will not provide an expected value in production. Referring to the File Tree, you’ll notice that in production the electron-main.js and electron-preload.js files are placed inside the dist/electron-* folder. Based on this knowledge, use __dirname & __filename accordingly.

读取和写入本地文件(Read & Write Local Files)

¥Read & Write Local Files

使用 Electron 的一大优势是能够访问用户的文件系统。这使你能够在本地系统上读写文件。为了避免 Chromium 的限制并避免写入应用的内部文件，请务必使用 Electron 的 API，特别是 app.getPath(name) 函数。此辅助方法可以获取系统目录（例如用户桌面、系统临时文件等）的文件路径。

¥One great benefit of using Electron is the ability to access the user’s file system. This enables you to read and write files on the local system. To help avoid Chromium restrictions and writing to your application’s internal files, make sure to make use of electron’s APIs, specifically the app.getPath(name) function. This helper method can get you file paths to system directories such as the user’s desktop, system temporary files, etc.

我们可以使用专门为我们的应用保留的 userData 目录，这样我们就可以确信其他程序或其他用户交互不会篡改此文件空间。

¥We can use the userData directory, which is reserved specifically for our application, so we can have confidence other programs or other user interactions should not tamper with this file space.

准备中(Prepping)

¥Prepping

你需要将 @electron/remote 依赖安装到你的应用中：

¥You will need the @electron/remote dependency installed into your app:

$ yarn add @electron/remote

然后，在你的 src-electron/electron-main.js 文件中，编辑以下几行：

¥Then, in your src-electron/electron-main.js file, make some edits to these lines:

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)

// ...

用法(Usage)

¥Usage

最后，以下是如何访问文件的示例：

¥Finally, here’s an example of how to access files:

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

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

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

¥If you import @electron/remote in your preload script, please remember that you need to set the following in your electron-main.js where you instantiate BrowserWindow:

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

访问公共文件夹(Accessing the Public Folder)

¥Accessing the Public Folder

如果出于某种原因，你在 /public 文件夹中存储了重要文件，你也可以按照以下代码访问这些文件。要了解为什么需要以这种方式访问​​它们，请阅读上面的 “使用 __dirname 和 __filename” 部分。

¥If for some reason, you have important files that you are storing in the /public folder, you can access those too by following the code below. To understand why you need to access them this way, please read the “Using __dirname & __filename” section above.

import path from 'path'
import { fileURLToPath } from 'url'

const currentDir = fileURLToPath(new URL('.', import.meta.url))

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