无法在 electronjs 中加载反应答案

【问题标题】：cant load react in electronjs无法在 electronjs 中加载反应
【发布时间】：2023-01-30 14:42:15
【问题描述】：

这是我的 package.js 文件

{
  "name": "cabed",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "electron-forge": "^5.2.4",
    "electron-is-dev": "^2.0.0",
    "electron-packager": "^17.1.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "main": "public/electron.js",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm:electron\"",
    "electron": "wait-on tcp:3000 && electron .",
    "eb": "electron-packager C:/Users/user/cabed cddf --platform=win32 --arch=x64"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "concurrently": "^7.6.0",
    "cross-env": "^7.0.3",
    "electron": "^22.1.0",
    "wait-on": "^7.0.1"
  },
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "stock_trading_app"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin",
            "linux",
            "win32"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

我运行的带有电子生成器的生成的 exe

npm run eb

上面代码生成的exe 不会在打开的 Windows 应用程序中呈现 React 应用程序。

这是我的应用程序 js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div style={{justifyContent:'center',alignContent:'center',alignItems:'center'}}>
    <div className="App">
     
        <img src={logo} className="App-logo" alt="logo" />
        <p>
         Sasdsad
        </p>
        <p>
         Sasdsad
        </p>
    </div></div>
  );
}

export default App;

当首先运行 npm start 时，exe 将在窗口内呈现反应页面。我可能需要一些配置，但我还找不到。

【问题讨论】：

你能显示你开始电子申请的地方吗？
npm run dev 命令打开一个窗口，成功加载反应应用程序

标签： javascript reactjs electron electron-packager

【解决方案1】：

既然你说它在你首先启动服务器时有效，我假设你在开发和生产中都使用 localhost URL。当你的应用程序被打包时，你应该在你的窗口中加载文件而不是本地 URL：

const { app } = require("electron");

const windowURL = app.isPackaged
  ? `file://${path.join(__dirname, "./index.html")}`
  : "http://localhost:3000/"

mainWindow.loadURL(windowURL);

根据您的文件结构，您的应用程序打包时的路径可能会有所不同。另外，不要忘记在您的package.json 上添加"homepage": "./"，否则您可能会得到一个空白页。

【讨论】：