基于React+Parcel的Electron应用打包后React组件无法渲染求助

我正在尝试打包并分发基于React Web应用构建的Electron桌面应用，使用Parcel作为打包工具。操作步骤为：执行npm run build构建Web应用，再执行npm run package生成可执行文件。

问题是桌面应用虽已创建，但React部分无法渲染，报错如下：

Failed to load resource: net::ERR_FILE_NOT_FOUND

我已确认index.html路径正常，问题出在index.js相关资源加载环节。

package.json 代码 #

{
  "name": "gympro-administration",
  "version": "1.0.0",
  "main": "electron/electron.js",
  "homepage": "./",
  "source": "public/index.html",
  "targets": {
    "main": false
  },
  "scripts": {
    "start": "concurrently  \"cross-env BROWSER=none PORT=3000 parcel\" \"wait-on http://localhost:3000 && electron .\"",
    "electron-dev": "electron .",
    "build": "parcel build",
    "serve": "yarn build && firebase emulators:start --only hosting:gymproadmin",
    "shell": "yarn build && firebase functions:shell",
    "deploy": "firebase deploy --only hosting:gymproadmin",
    "logs": "firebase hosting:log",
    "watch": "parcel watch",
    "stats": "parcel build --reporter @parcel/reporter-bundle-analyzer",
    "buddy": "parcel build --reporter @parcel/reporter-bundle-buddy",
    "dev": "npm start",
    "package": "electron-builder"
  },
  "devDependencies": {
    ....
  },
  "dependencies": {
    .....
  }
}

Electron主入口文件 electron.js #

const { app, ipcMain } = require("electron");
const { createWindow } = require("./window.js");
const ipcDispatcher = require("./ipc/ipcDispatcher.js");
const handlers = require("./ipc/handlerRegistry.js");

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

  Object.keys(handlers).forEach((channel) => {
    ipcMain.handle(channel, (e, data) => {
      return ipcDispatcher.dispatch(channel, data);
    });
  });
});

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

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

window.js 文件 #

const { BrowserWindow } = require("electron");
const initializeDatabase = require("../electron/db/database.js");

const path = require("path");
let mainWindow;

function createWindow() {
  // Initialize the database
  initializeDatabase();

  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      preload: path.resolve(__dirname, "./db/preload.js"),
    },
  });

/*   const distPath = path.resolve(__dirname, "..", "dist");
  const filePath = path.join(distPath, "index.html");
  mainWindow.loadURL("http://localhost:3000"); */
const distPath = path.resolve(__dirname, "..", "dist");
const filePath = path.join(distPath, "index.html");
mainWindow.loadFile(filePath);
//mainWindow.loadURL("http://localhost:3000");

  mainWindow.on("closed", () => (mainWindow = null));
  return mainWindow;
}

module.exports = {
  createWindow,
};

补充信息 #

• 当使用mainWindow.loadURL("http://localhost:3000")运行时，应用可正常渲染；但加载dist目录下的index.html时就会出现上述错误；加载public目录下的index.html则报错Unexpected token: '<'（推测是无法读取JSX代码）。
• dist目录下的index.html代码：

<!DOCTYPE html>
<html lang="en">
  <head><link rel="stylesheet" href="/index.4746b4dd.css">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css">
    <link rel="stylesheet" href="https://unpkg.com/react-leaflet-markercluster/dist/styles.min.css">
    <title>GymPro</title>
  </head>
  <body>
    <div id="app"></div>
    <script src="/index.975ef6c8.js" defer=""></script>
  </body>
</html>

内容的提问来源于stack exchange，提问作者Fedy Belaid