Quasar CLI with Webpack - @quasar/app-webpack
使用 **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
# (or .ts)
electron-preload.js
# (or .ts)
...contents of /public
读写本地文件
使用 Electron 的一大好处是能够访问用户的文件系统。这使您能够在本地系统上读写文件。为了避免 Chromium 的限制以及误写应用程序的内部文件，请务必使用 Electron 提供的 API，特别是 app.getPath(name) 函数。它可以帮助您获取系统目录的路径，如用户的桌面、系统临时目录等。
我们可以使用 userData 目录，它是专门为我们的应用程序保留的，因此我们可以确信其他程序或其他用户交互不会篡改这个文件空间。
准备工作
您需要先在项目中安装 @electron/remote 依赖：
$ yarn add @electron/remotecontent_paste
然后，在您的 src-electron/electron-main.js 文件中做如下修改：
import { app, BrowserWindow, nativeTheme } from "electron";
import { initialize, enable } from "@electron/remote/main"; // <-- 添加这行
import path from "path";
initialize(); // <-- 添加这行
// ...
mainWindow = new BrowserWindow({
// ...
webPreferences: {
sandbox: false, // <-- 设置为 false 才能在 preload 脚本中导入 @electron/remote
// ...
},
});
enable(mainWindow.webContents); // <-- 添加这行
mainWindow.loadURL(process.env.APP_URL);
// ...content_paste
使用方式
以下是一个访问文件的示例：
import path from "path";
import { app } from "@electron/remote";
const filePath = path.join(app.getPath("userData"), "/some.file");content_paste
如果您在 preload 脚本中导入了 @electron/remote，请记得在 electron-main.js 中实例化 BrowserWindow 时设置以下选项：
mainWindow = new BrowserWindow({
// ...
webPreferences: {
// ...
sandbox: false // <-- 设置为 false 才能在 preload 脚本中导入 @electron/remote
}
}content_paste
访问 Public 目录
如果出于某种原因，您将一些重要的文件存放在了 /public 目录下，那么您也可以通过以下代码访问它们。要理解为什么需要这样访问，请阅读上面的"使用 **dirname & **filename"部分。
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);content_paste