Electron Create React 应用程序在构建后未加载

Question

我使用

npx create react app

创建了一个测试 React 项目，并添加了 electro.js 文件。然后，我运行构建脚本，它已成功编译，但当我尝试运行 .exe 时，没有任何显示，控制台返回

Failed to load resource: net::ERR_FILE_NOT_FOUND

。

电子.js

const { app, BrowserWindow } = require("electron");
const path = require("path");
const isDev = require("electron-is-dev");

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1920,
    height: 1080,
    webPreferences: {
      preload: path.join(__dirname, "preload.js"),
    },
  });

  mainWindow.loadURL(
    isDev
      ? "http://localhost:3000"
      : `file://${path.join(__dirname, "../build/index.html")}`
  );

  mainWindow.webContents.openDevTools();
}

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

  app.on("activate", function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow();
  });
});

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

编辑：所以我从一开始就再次尝试并设法仅使用 create-react-app 进行构建，但是我现在已经使用 Routes 组件更改了一些文件，而在开发中，当我构建它时，它工作正常，但没有任何显示。显示了 console.log 但未显示组件。

routes.js

const routes = [
  {
    exact: true,
    path: "/",
    component: lazy(() => import("../test")),
  },
];

const renderRoutes = (routes) =>
  routes ? (
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        {routes.map((route, i) => {
          const Layout = route.layout || Fragment;
          const Component = route.component;

          console.log({ Component });

          return (
            <Route
              key={i}
              path={route.path}
              exact
              render={(props) => (
                <Layout>
                  {route.routes ? (
                    renderRoutes(route.routes)
                  ) : (
                    <Component {...props} />
                  )}
                </Layout>
              )}
            />
          );
        })}
      </Switch>
    </Suspense>
  ) : null;

const Routes = () => {
  return renderRoutes(routes);
};

export default Routes;

Answer 1

就我而言，我使用

react-router-dom

库来处理 electron 和 React 应用程序中的路由，并删除它（使用

react-router-dom

进行路由）对我有用。

旧代码：

这段代码在开发环境中运行良好，但是当我使用

electron-builder

生成构建时，它显示了一个空页面/屏幕。

import { createContext, useState } from "react";
import { Routes, Route } from "react-router-dom";

import Data from "./screens/Data";

const GlobalContext = createContext();

export default function App() {
    let [user, setUser] = useState("");
    return (
        <main className="h-[100vh]" data-theme="light">
            <GlobalContext.Provider value={{ user, setUser }}>
                <Routes>
                    <Route path="/" element={<Data />} />
                </Routes>
            </GlobalContext.Provider>
        </main>
    );
}

export { GlobalContext };

修改后的代码：

import { createContext, useState } from "react";

import Data from "./screens/Data";

const GlobalContext = createContext();

export default function App() {
    let [user, setUser] = useState("Vrial");
    return (
        <main className="h-[100vh]" data-theme="light">
            <GlobalContext.Provider value={{ user, setUser }}>
                <Data />
            </GlobalContext.Provider>
        </main>
    );
}

export { GlobalContext };

可能原因：

• 生产应用程序 (.exe) 可能无法识别

  /

  、

  /home

  、

  /any

  等 URL。

替代解决方案：

• 我们可能必须手动实现路由逻辑。

Answer 2

问题可能在于您更改了其中一个主文件的名称，例如，电子在构建时搜索特殊文件名。请检查您的文件名。

此错误意味着未找到该文件。路径错误或文件不存在于您想要的位置。