electron 不能负载电子React

k10s72fa  于 2023-02-01  发布在  Electron
关注(0)|答案(1)|浏览(173)

下面是我的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启动第一,然后exe呈现窗口内的React页面。我需要一些配置可能,但我还没有找到它。

gpfsuwkq

gpfsuwkq1#

既然你说它在你第一次启动服务器的时候就可以工作,我假设你在dev和prod中都使用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": "./",否则可能会得到一个空白页。

相关问题