Electron

Question

相对较新的电子领域：

我尝试了一些方法来解决这个问题，例如使用 ./ 代替 / 或在 packaging.json 中添加 "homepage" :，但仍然无效。

我正在尝试导入这两个

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

我的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>
  ...
  ..

当我运行调试时，我遇到了以下错误之一：

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

我该如何解决这个问题？

Answer 1

我认为 package.json 文件中的 "homepage": 行是 React 的东西。如果您不使用 React，则可以删除 "homepage": 行。

package.json 文件中的 "main": 行是 Electron 应用程序的入口点。因此，如果启动的 js 文件是 "main.js" 那么 "main": "main.js" 是正确的。

package.json

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

如果您要在 main.js 文件中创建 info-board window，那么您可以这样做。

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(); })
});

现在，要在 infoboard.html 文件中引用 gridstack css 和 js 文件，请使用相对路径（./、../），而不是绝对路径（ /)。 IE：您需要 step-up 2 个目录级别才能访问 node_modules 目录。

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>
  ...
  ..

Electron - 无法加载资源：net::ERR_FILE_NOT_FOUND

Electron - Failed to load resource: net::ERR_FILE_NOT_FOUND

html

javascript

json