Electron 在根文件夹中寻找资源答案

【问题标题】：Electron Looking for Resources in Root FolderElectron 在根文件夹中寻找资源
【发布时间】：2016-12-17 19:09:46
【问题描述】：

我们正在构建一个 Web 应用程序（在 Angular 2 中，虽然我不确定这是否是我的问题的原因），我们还需要作为 Electron 应用程序运行。我已经扩展了解决方案并替换了 package.json 中的项目，以便在启动时启动 Electron。由于我不明白的原因，在我们的解决方案中，它在我的驱动器的根文件夹中寻找资源的相对路径，而不是从 (C:\Source\NameOfMyApp) 启动应用程序的文件夹。

有人可以解释为什么会发生这种情况吗？

对 package.json 的更改

{
    "main": "electron-main.js",
    "scripts": {
        "start": "electron ."
    }
},
"devDependencies": {
    "electron-prebuilt": "^1.2.0"
}

当我运行npm start 时，index.html 运行但找不到任何资源。

index.html 中的代码

<link rel="stylesheet" href="test.css">

其中 test.css 是与 index.html 存在于同一文件夹中的文件

electron-main.js 中的代码

const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

let mainWindow;
function createWindow() {

    mainWindow = new BrowserWindow({ width: 1200, height: 900 });
    console.log("__dirname", __dirname);

    mainWindow.loadURL(`file://${__dirname}/index.html`);

    // Open the DevTools.
    mainWindow.webContents.openDevTools();

    mainWindow.on('closed',
        function() {
            mainWindow = null;
        });
}

app.on('ready', createWindow);

DevTools 控制台错误

我的理解是，它应该在创建应用程序的同一文件夹中查找文件，而不是从根目录，而是从 Electron 查找文件，无论出于何种原因，假设所有相关链接都来自根 C:/ 级别。

【问题讨论】：

标签： angular npm chromium electron

【解决方案1】：

您的index.html 中有<base href="/" > 吗？我相信电子使用文件系统，/ 是文件系统的根，所以C:\。

您应该将您的<base href="/"> 更改为您的index.html 所在的路径

<base href="C:/path/to/index">

【讨论】：

对于它的价值，根据我在 Electron 中使用 Angular 2 的经验，您可以使用它会正确地进行相对路径。
@PierreDuc 这是一个好方法吗？为什么 electron 找不到相对于 index.html 的资源
@x86-64 对于一个无法刷新页面的电子应用程序，最好将基本 href 设置为.。所以只是一个点。那么就相对比较
@PierreDuc 它不起作用，我仍然遇到同样的加载资源失败错误。

【解决方案2】：

如果您希望您的应用在浏览器和 Electron 中都使用相对路径，则需要通过将以下内容添加到 index.html 来指定相对根目录：

<base href="./">

【讨论】：