admin管理员组

文章数量:1316356

relatively new to electron area:

I tried a few method to solve this issue such as using ./ instead of / or adding "homepage" : in packaging.json and still won't work.

I was trying to import these two

<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>

my json:

{
  "name": "login",
  "version": "1.0.0",
  "homepage":"./",
  "main": "main.js",
   ....
}

html:

<!DOCTYPE html>
  <head>
    <title>Infomation Board </title>
    <link rel="stylesheet" href="../styles/styles.css" />
    <script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
    <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
  </head>
  <body>
  ...
  ..

And when I run debug, I get either of these errors:

GET file:///C:/node_modules/gridstack/dist/gridstack-h5.js net::ERR_FILE_NOT_FOUND

 GETfile:///C:/Users/whatd/OneDrive/Desktop/Amazon%20Verson%202/src/directories/node_modules/gridstack/dist/gridstack.min.css net::ERR_FILE_NOT_FOUND

directory:

how would I go about solving this issue?

relatively new to electron area:

I tried a few method to solve this issue such as using ./ instead of / or adding "homepage" : in packaging.json and still won't work.

I was trying to import these two

<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>

my json:

{
  "name": "login",
  "version": "1.0.0",
  "homepage":"./",
  "main": "main.js",
   ....
}

html:

<!DOCTYPE html>
  <head>
    <title>Infomation Board </title>
    <link rel="stylesheet" href="../styles/styles.css" />
    <script src="node_modules/gridstack/dist/gridstack-h5.js"></script>
    <link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>
  </head>
  <body>
  ...
  ..

And when I run debug, I get either of these errors:

GET file:///C:/node_modules/gridstack/dist/gridstack-h5.js net::ERR_FILE_NOT_FOUND

 GETfile:///C:/Users/whatd/OneDrive/Desktop/Amazon%20Verson%202/src/directories/node_modules/gridstack/dist/gridstack.min.css net::ERR_FILE_NOT_FOUND

directory:

how would I go about solving this issue?

  • javascript
  • html
  • json
  • electron
Share Improve this question asked Feb 18, 2022 at 6:50 ZyaanZyaan 1091 gold badge2 silver badges10 bronze badges 3
  • Did u install gridstack using npm? – Deepak Mukka Commented Feb 18, 2022 at 10:36
  • Like with the styles.css, you could provide a correct relative path: e.g. ../../node_modules/gridstack/dist/gridstack-h5.js – snwflk Commented Feb 18, 2022 at 12:20
  • 1 @DeepakMukka Yes i did and as for snwflk I tried and still throw me the same errors – Zyaan Commented Feb 18, 2022 at 22:06
Add a ment  | 

2 Answers 2

Reset to default 4

I think the "homepage": line in your package.json file is a React thing. If you are not using React then you can remove the "homepage": line.

The "main": line in your package.json file is the entry point of your Electron app. Therefore, if the js file that will kick things off is "main.js" then "main": "main.js" is correct.

package.json

{
  "name": "login",
  "version": "1.0.0",
  "main": "main.js",
  ...
}

If you are creating your info-board window in your main.js file then you would do so like this.

main.js

// Electron module(s).
const electronApp = require('electron').app;
const electronBrowserWindow = require('electron').BrowserWindow;

// Node module(s).
const nodePath = require('path');

// Declare window (no garbage collect).
let infoBoardWindow;

// Application is now ready to start.
electronApp.on('ready', () => {

  // Create the info-board window.
  infoBoardWindow = new electronBrowserWindow({
    x: 0,
    y: 0,
    width: 800,
    height: 600,
    show: false,
    webPreferences: { 
      nodeIntegration: false,
      contextIsolation: true,
      worldSafeExecuteJavaScript: true,
      enableRemoteModule: false,
      preload: nodePath.join(__dirname, 'preload.js')
    }
  });

  // Load the info-board window.
  infoBoardWindow.loadFile(nodePath.join(__dirname, './src/directories/infoboard.html'))
  .then(() => { infoBoardWindow.show(); })
});

Now, to reference both the gridstack css and js files in your infoboard.html file use relative paths (./, ../), not an absolute path (/). IE: You need to step-up 2 directory levels to get access to the node_modules directory.

infoboard.html

<!DOCTYPE html>
  <head>
    <title>Infomation Board </title>
    <link rel="stylesheet" href="../styles/styles.css" />
    <link rel="stylesheet" href="../../node_modules/gridstack/dist/gridstack.min.css" />
    <script src="../../node_modules/gridstack/dist/gridstack-h5.js"></script>
  </head>
  <body>
  ...
  ..

If this is happening when having <base href="/"> in the index.html, just replace it by <base href="./">

Or if you have any other url, use relative URL by adding ./ at beginning.

本文标签： javascriptElectronFailed to load resource netERRFILENOTFOUNDStack Overflow

版权声明：本文标题：javascript - Electron - Failed to load resource: net::ERR_FILE_NOT_FOUND - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741997176a2410280.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。