如何在 React + Electron 应用程序中重新定位目标不明确的构建文件？

Question

我正在尝试使用 react 和电子构建桌面应用程序。我可以用npm start build它来构建项目，但是当我运行可执行文件时，我得到一个带有白屏的节点应用程序，因为该应用程序找不到它需要的资源。

这些错误是：

Failed to load resource: net::ERR_FILE_NOT_FOUND /F:/static/css/main.056419ee.chunk.css:1   
Failed to load resource: net::ERR_FILE_NOT_FOUND 2.eba76f4b.chunk.js:1  
Failed to load resource: net::ERR_FILE_NOT_FOUND main.175818bb.chunk.js:1 

F:是正确的驱动器，但我认为 Electron 不应该static在驱动器根目录中查找目录。我不知道是什么原因造成的，或者为什么会有一个领先的/. 另外，我不知道为什么它会在不同的目录中寻找另外两个块文件；所有三个文件都在./build/static/js/.

• 这是我的第一个 reactjs 应用程序，也是我的第一个 nodejs 应用程序之一，所以我不知道如何调试它。我对所有构建步骤都不是很清楚，因为我使用了一些没有解释任何内容的样板和教程。
• 我最初使用的命令来自create-react-appp，特别是npx create-react-app creative-ontology-editor
• 当我使用npm start和运行它时，反应部分工作正常npm run electron-dev。从那里我尝试使用本教程和这个包示例来让电子工作。
• 如果这有助于解决问题，我正在考虑将项目公之于众。

源代码

index.html

这是内置的电子应用程序显示的 html：（注意：我美化了但将缩小的 js 保留在一行中，以便可以轻松看到其余部分）

Failed to load resource: net::ERR_FILE_NOT_FOUND /F:/static/css/main.056419ee.chunk.css:1   
Failed to load resource: net::ERR_FILE_NOT_FOUND 2.eba76f4b.chunk.js:1  
Failed to load resource: net::ERR_FILE_NOT_FOUND main.175818bb.chunk.js:1 

package.json

这是我的项目的package.json. 我知道我可能已经把我的开发和正常依赖都搞混了，但我怀疑这是问题的一部分/

{
  "name": "creative-ontology-editor",
  "version": "0.1.0",
  "author": "Joe Bush",
  "description": "An applied ontology organization tool",
  "private": true,
  "main": "public/electron.js",
  "dependencies": {
    "concurrently": "^4.1.0",
    "cross-env": "^5.2.0",
    "electron-is-dev": "^1.0.1",
    "react": "^16.8.4",
    "react-dom": "^16.8.4",
    "react-scripts": "2.1.8",
    "typescript": "^3.4.1",
    "wait-on": "^3.2.0"
  },
  "scripts": {
    "react-build": "react-scripts build",
    "react-test": "react-scripts test",
    "react-eject": "react-scripts eject",
    "react-start": "react-scripts start",
    "electron-build": "electron-builder",
    "release": "yarn react-build && electron-builder --publish=always",
    "build": "yarn react-build && yarn electron-build",
    "electron-dev": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron .\"",
    "dist": "build"
  },
  "build": {
    "appId": "creative-ontology-editor",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories": {
      "buildResources": "public"
    },
    "linux": {
      "target": [
        "AppImage",
        "deb"
      ]
    },
    "win": {
      "target": "NSIS",
      "icon": "build/icon.ico"
    }
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "electron": "^4.1.3",
    "electron-builder": "^20.39.0"
  }
}

一个缩写的目录树看起来像这样

creative-ontology-editor
|-- build
|   |-- static
|   |   |-- csss
|   |   +-- js
|   |       |-- 2.eba76f4b.chunk.js
|   |       |-- 2.eba76f4b.chunk.js.map
|   |       |-- main.175818bb.chunk.js
|   |       |-- main.175818bb.chunk.js.map
|   |       |-- runtime~main.a8a9905a.js
|   |       |-- runtime~main.a8a9905a.js.map
|   |
|   |-- asset-manifest.json
|   |-- electron.js
|   |-- index.html
|   |-- manifest.json
|   |-- precache-manifest.825 ... .js
|   +-- service-worker.js
|
|-- dist
|   |-- win-unpacked
|   |-- builder-effective-config.yaml
|   |-- creative-ontology-editor Setup 0.1.0.exe
|   |-- creative-ontology-editor Setup 0.1.0.exe.blockmap
|
|-- node_modules
|-- public
|   |-- electron.js
|   |-- index.html
|   +-- manifest.json
|
|-- src
|   |-- Components
|   |-- App.css
|   |-- App.js
|   +-- index.js
|
+-- package.json

./build/asset-manifest.json

{
  "main.css": "/static/css/main.056419ee.chunk.css",
  "main.js": "/static/js/main.175818bb.chunk.js",
  "main.js.map": "/static/js/main.175818bb.chunk.js.map",
  "runtime~main.js": "/static/js/runtime~main.a8a9905a.js",
  "runtime~main.js.map": "/static/js/runtime~main.a8a9905a.js.map",
  "static/js/2.eba76f4b.chunk.js": "/static/js/2.eba76f4b.chunk.js",
  "static/js/2.eba76f4b.chunk.js.map": "/static/js/2.eba76f4b.chunk.js.map",
  "index.html": "/index.html",
  "precache-manifest.82521987a6df63b594987c0f56a4cbb9.js": "/precache-manifest.82521987a6df63b594987c0f56a4cbb9.js",
  "service-worker.js": "/service-worker.js",
  "static/css/main.056419ee.chunk.css.map": "/static/css/main.056419ee.chunk.css.map"
}

./build/manifest.json

{
  "short_name": "COE",
  "name": "Creative Ontology Editor",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

Answer 1

在Kitze 的文章中，我的内容中缺少一行package.json：

"homepage": "./"

他甚至解释说：

最后一件事：

在 package.json 中设置“homepage”，否则打包的应用将找不到 .js 和 .css 文件。