無法在 electronjs 中加載反應

Question

這是我的 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": {} } ] } } }

我用 electron 構建器生成的 exe

 npm run eb

上面代碼生成的 exe 不會在打開的 windows 應用程序中呈現反應應用程序。

這是我的應用程序 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 在 window 中呈現反應頁面。我可能需要一些配置，但我還沒有找到它。

Answer 1

既然你說它在你首先啟動服務器時有效，我假設你在開發和生產中都使用localhost URL。 當你的應用程序被打包時，你應該加載你的 window 中的文件，而不是本地的 URL：

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

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

mainWindow.loadURL(windowURL);

根據您的文件結構和構建/打包配置，您的應用程序打包時的路徑可能會有所不同。 另外，不要忘記在您的package.json上添加"homepage": "./" ，否則您可能會得到一個空白頁面。