电子在根文件夹中寻找资源

Question

我们正在构建一个 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

存在于同一文件夹中的文件

电子代码-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:/ 级别.

Answer 1

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

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

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

Answer 2

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

来指定相对根目录

<base href="./">

电子在根文件夹中寻找资源

Electron Looking for Resources in Root Folder

angular

npm

chromium

electron

更改为 package.json

index.html

电子代码-main.js

DevTools 控制台错误