我的电子exe应用程序（用于运行和反应应用程序）没有运行

Question

我有 React-Electron 应用程序，同时使用 Electron-Builder 将此应用程序制作为 exe 文件。 制作 exe 后，如果我尝试运行 exe，则会打开空白窗口。但是，如果我在本地主机中打开相同的应用程序，然后尝试打开 exe，则 exe 会完美打开。

我的入口点是main.js：

const { app, BrowserWindow } = require('electron')

const createWindow = () => {
    const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        title: 'SieAPIAssure',
        webPreferences: {
            enableRemoteModule: true
        }
    });

    mainWindow.loadURL('http://localhost:3000')
};

app.whenReady().then(() => {
    createWindow()

    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

这是我的 pacakage.json

{
  "name": "sieapiassure.ui",
  "version": "0.1.0",
  "description": "SieAPIAssure",
  "author": "Abhay Singh, Vikash Shukla, Sharath Roy",
  "private": true,
  "homepage": "./",
  "dependencies": {
    "@emotion/react": "^11.11.4",
    "@emotion/styled": "^11.11.5",
    "@microsoft/signalr": "^8.0.7",
    "@mui/icons-material": "^5.16.4",
    "@mui/material": "^5.16.4",
    "@mui/styled-engine-sc": "^6.0.0-alpha.18",
    "@mui/x-charts": "^7.14.0",
    "@mui/x-tree-view": "^7.14.0",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.7.2",
    "concurrently": "^8.2.2",
    "cross-env": "^7.0.3",
    "fs": "^0.0.1-security",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-router-dom": "^6.26.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.1.11",
    "wait-on": "^7.2.0",
    "web-vitals": "^2.1.4"
  },
  "main": "public/main.js",
  "homepage": "./",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron:serve": "concurrently -k \"cross-env BROWSER=none npm start\" \"npm run electron:start\"",
    "electron:build": "yarn build && electron-builder -c.extraMetadata.main=build/main.js",
    "electron:start": "wait-on tcp:3000 && electron ."
  },
  "build": {
    "npmRebuild": false,
    "appId": "com.sieapiassure.id",
    "files": [
      "build/**/*",
      "main.js"
    ],
    "directories": {
      "buildResources": "assets"
    },
    "win": {
      "target": "nsis",
      "signingHashAlgorithms": [],
      "certificateFile": null,
      "certificateSubjectName": null
    }
  },
  "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": {
    "electron": "^32.1.2",
    "electron-builder": "^25.0.5"
  }
}

应用程序组件是

import React, { useState } from 'react';
import { HashRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
import './App.css';
import { Container } from '@mui/material';
import Header from './components/header/header';
import NavBar from './components/navbar/navbar';
import Home from './components/home/home';
import Project from './components/project/project';
import CreateProject from './components/project/createproject/createproject';
import ViewProjects from './components/viewprojects/viewprojects';
import Execution from './components/execution/execution';
import Report from './components/report/report';  

function App() {    

   
    const [projectDetails, setProjectDetails] = useState({});
    

  

    
    const handleSaveProject = (details) => {
        setProjectDetails(details);
    };
    

    return (
        <Router>
            <div className="app">
                <Header className="header" />
                <NavBar className="navbar" />
                <div className="main">
                    <Routes>
                        <Route path='/' element={ <Navigate to = "/home"/>} />
                        <Route path="/home" element={
                            <Container sx={{ width: '100%', marginTop: 5 }}>
                                <Home />
                            </Container>
                        } />
                        <Route path="/home/project" element={<Project projectDetails={projectDetails} />} />
                        <Route path="/home/createproject" element={
                            <CreateProject
                                open={true} 
                                onClose={() => { }}
                                onSave={handleSaveProject}
                            />
                        } />
                        <Route path="/viewprojects" element={<ViewProjects />} />
                        <Route path="/execution" element={<Execution />} />
                        <Route path="/report" element={<Report />} />
                        <Route path="#" element={<div style={{ height: '100vh', backgroundColor: 'black' }}></div>} />
                    </Routes>
                </div>
            </div>
        </Router>
    );
}

导出默认应用程序；

如何让它发挥作用

Answer 1

在生产中，您应该使用构建的 HTML 文件而不是

localhost

:

app.isPackaged
  ? mainWindow.loadFile(path.join(__dirname, "index.html")) // Prod
  : mainWindow.loadURL("http://localhost:3000"); // Dev