无法将 react 应用程序构建加载到 electron 中

Not able to load react app build into electron

提问人：JEFF BRO 提问时间：11/17/2023 更新时间：11/17/2023 访问量：47

问：

我正在尝试将 react 构建文件实现到我的电子应用程序中并将其构建到 .exe 文件中。我被困在我的电子应用程序中得到空屏幕的地方，控制台 .log 中没有错误。在将链接传递给 mainWindow 对象后，我使用 npm run build 来获取 react 构建文件。

这些是我的代码.

main.js

const { app, BrowserWindow, ipcMain, Menu } = require('electron');
const { join } = require('path-browserify');
const url = require("url");
const path = require("path");




function createWindow() {

    mainWindow = new BrowserWindow({
        width: 1000,
        height: 1000,
        minWidth: 1000,
        minHeight: 1000,

        webPreferences: {
            preload: join(__dirname, './preload.js'),
            nodeIntegration: true,
            worldSafeExecuteJavaScript: true,
            // allowRunningInsecureContent: true,
            contextIsolation: true,

        },
    });

  
 const startURL = url.format({pathname: join(__dirname, './/finalelectronapp//build//index.html'),
 protocol: "file:"
})

mainWindow.loadURL( startURL);



    if (process.env.NODE_ENV === 'development') {
        mainWindow.webContents.openDevTools();
    }

    mainWindow.on('closed', () => {
        mainWindow = null;
    });
}


app.on('ready', createWindow);

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

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

ipcMain.on('reload-window', () => {
    mainWindow.reload();
  });

ipcMain.on('installation-complete', () => {
    if (installWindow) {
        installWindow.close();
        installWindow = null;
    }

    createWindow();
});

电子包.json

{
  "name": "electroninstallion",
  "version": "1.0.0",
  "description": "",
  "main": "installation.js",
  "scripts": {
    "start-electron": "electron ./main.js",
    "start": "nodemon --exec electron ./main.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "electron-packager . --asar",
    "allbuild": "electron-packager . --all",
    "homepage": "./"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^1.6.0",
    "electron-is-dev": "^2.0.0",
    "fs": "^0.0.1-security",
    "mssql": "^10.0.1",
    "path-browserify": "^1.0.1",
    "process": "^0.11.10",
    "react-router-dom": "^6.17.0",
    "sqlite3": "^5.1.6",
    "tedious": "^16.6.0"
  },
  "devDependencies": {
    "electron": "^27.0.2",
    "electron-build": "^0.0.3",
    "electron-packager": "^17.1.2",
    "node-windows": "^1.0.0-beta.8",
    "nodemon": "^3.0.1",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

React index.html 位于构建文件夹中

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="./logo192.png" />
    <link rel="manifest" href="./manifest.json" />
    <title>React App</title>
    <script defer="defer" src="./static/js/main.301e95eb.js"></script>
    <link href="./static/css/main.94852128.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

反应包.json

{
  "name": "frontend",
  "version": "0.1.0",
  "homepage": "./",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.14.16",
    "@mui/material": "^5.14.16",
    "@reduxjs/toolkit": "^1.9.7",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.60",
    "@types/react": "^18.2.33",
    "@types/react-dom": "^18.2.14",
    "axios": "^1.6.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.18.0",
    "react-scripts": "5.0.1",
    "sass": "^1.69.5",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "npm run build:react && npm run build:bundle",
    "build:react": "react-scripts build",
    "build:bundle": "webpack --config webpack.config.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "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": {
    "@babel/core": "^7.23.3",
    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
    "@babel/preset-env": "^7.23.3",
    "@babel/preset-react": "^7.23.3",
    "@types/glob": "^8.1.0",
    "babel-loader": "^9.1.3",
    "webpack": "^5.89.0",
    "webpack-cli": "^5.1.4"
  }
}

反应 webpack.config.js

const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
const glob = require("glob");

module.exports = {
  entry: {
    "bundle.js": [
      ...glob
        .sync("build/static/?(js|css)/main.*.?(js|css)")
        .map((f) => path.resolve(__dirname, f)),
    ],
  },
  output: {
    filename: "build/static/js/bundle.min.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|jpg|gif|svg)$/i,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192,
              name: "static/media/[name].[hash:8].[ext]",
            },
          },
        ],
      },

      {
        test: /\.(png|jpg|gif|svg)$/i,
        include: path.resolve(__dirname, "media"),
        use: [
          {
            loader: "file-loader",
            options: {
              name: "static/media/[name].[hash:8].[ext]",
            },
          },
        ],
      },
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

反应 Index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './Redux/Store'

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <Provider store={store}> 
  <React.StrictMode>
    <App />
  </React.StrictMode>
</Provider>

);

反应 app.tsx

import React, { useState, useEffect } from 'react';
// import axios from 'axios';
import { Routes, Route, BrowserRouter as Router } from 'react-router-dom';
import Login from './Components/Login/Login';
import Header from './Components/Header/Header';
import Footer from './Components/Footer/Footer';
import QuickLinks from './Components/Pages/QuickLinks/QuickLinks';
import CustomerDashboard from './Components/Pages/CustomerDashboard/CustomerDashboard';
import MyTheme from "./Components/Theme";
import { ThemeProvider } from "@mui/material";
import CustomerDataDetails from './Components/Pages/CustomerData/CustomerDataDetails';
import CustomerDataDetailsDemo from './Components/Pages/CustomerDataDemo/CustomerDataDetailsDemo';


function App() {
  return (
    <> 
    {/* <ThemeProvider theme={MyTheme}> */}
     {window.location.pathname !== '/'? (<></>) : (< Header />)}
 
    <Router>
      <Routes>
      <Route path="/" element={< CustomerDataDetailsDemo />} /> 
        {/* <Route path="/" element={< Login />} /> */}
        <Route path="/QuickLinks" element={<QuickLinks/>} />
        <Route path="/CustomerDataDetails" element={< CustomerDataDetails />} /> 
        <Route path="/Dashboard" element={< CustomerDashboard />} /> 
        
      
      </Routes>
    </Router>
    {window.location.pathname !=='/'? (<></>) : (  <Footer/>)}
    
      
     
   
    {/* </ThemeProvider> */}
    </>
  );
}

export default App;

这就是我在控制台.log中得到的。

我的主机

但是我能够在这个电子应用程序中运行其他 react 项目构建，但不能专门运行这个。

javascript reactjs webpack 电子 package.json

评论

0赞 Arkellys 11/18/2023
这回答了你的问题吗？打包 Electron App 导致 UI 为空
0赞 JEFF BRO 11/20/2023
不，这不起作用@Arkellys
0赞 Arkellys 11/20/2023
再试一次。确保你在正确的位置设置，在你共享的配置上，它不是一个脚本，它应该在根目录下。homepagescripts
0赞 JEFF BRO 11/20/2023
@Arkellys我更改了 main 中的 url.js 我用 MemoryRouter 将我的路由包装在 App.tsx 中，而不是 BrowserRouter 现在它工作了.mainWindow.loadURL('file://' + path.join(__dirname, './finalelectronapp/build/index.html'))

答： 暂无答案

上一个：TouchStart 事件在服务器上缺少信息

下一个：将私有 GitLab Respository 作为 package.json 依赖项，而无需创建部署令牌