使用 electron-builder 构建 React-Electron 应用程序，index.js 加载到 pre 标签中

Posted 2023-02-27

【中文标题】使用 electron-builder 构建 React-Electron 应用程序，index.js 加载到 pre 标签中

【英文标题】：Building a React-Electron app using electron-builder, index.js loads inside pre tags

【发布时间】：2021-01-13 13:50:53

【问题描述】：

我现在正在尝试构建一个应用程序以分发以进行测试。

我正在使用 React 和 Electron 以及 electron-builder 来构建应用程序本身。我不是网络开发人员，所以我一直在努力保持基本的东西，只是让一些东西发挥作用。

大约五个小时后，我终于能够让应用程序正确构建并启动，但是当它加载 index.js（应用程序的第一页）时，它会显示 index.js 的源代码而不是渲染内容.在 devtools 中，所有内容都在 pre 标签内。

我已经查看了this thread 并尝试过，但它并没有改变任何东西，而且据我所知，我没有使用服务人员。

What the actual Electron window displays after launching with the devtools alongside.

这是 main.js 中的 createWindow 函数。 我试过对路径名做各种事情都没有效果。

function createWindow() 
    const startUrl = process.env.ELECTRON_START_URL || url.format(
        pathname: path.join(__dirname, '../src/index.js'),
        protocol: 'file:',
        slashes: true,
    );
    mainWindow = new BrowserWindow(
        width: 800, height: 600, title: "Electron App", webPreferences: 
            nodeIntegration: true
        
    );
    mainWindow.loadURL(startUrl);
    mainWindow.on('closed', function () 
        mainWindow = null;
    );

这是我的 package.json 脚本

 "scripts": 
    "start": "nf start -p 3000",
    "start-electron": "set ELECTRON_START_URL=http://localhost:3000 && electron .",
    "react-start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-electron": "npm run build && electron-builder build --win"
  

这里也是构建部分。老实说，我真的不明白这是什么或做什么，但经过几个小时的反复试验，这就是让我达到现在这一点的原因。

"build": 
"appId": "Test",
"extends": null,
"files": [
  "./build/**/*",
  "./electron/main.js",
  "./src/**/*"
 ]

据我所知，它与 Electron 启动 URL 有关，因为当我从 createWindow 中的 const startUrl 中删除它时，使用 npm start 运行应用程序与构建的 Electron 应用程序执行相同的操作，而之前每次使用 npm 都会正常启动应用程序。

解决后编辑：

将 package.json 中的 build 修改为

"build": 
    "appId": "Test",
    "extends": null,
    "files": [
      "./build/**/*",
      "./electron/main.js",
      "./src/**/*"
    ],
    "directories": 
      "buildResources": "./public"
    
      

没有这个修改我没有测试过，所以我不确定它是否真的有必要。

起始网址已更改为

const startUrl = process.env.ELECTRON_START_URL || url.format(
        pathname: path.join(__dirname, '../build/index.html'),
        protocol: 'file:',
        slashes: true,
    );

【参考方案1】：

你应该用一个 html 文件来设置它。

    const startUrl = process.env.ELECTRON_START_URL || url.format(
        pathname: path.join(__dirname, '../src/index.html'),
        protocol: 'file:',
        slashes: true,
    );

【讨论】：

差不多就是这样。我不记得为什么我将其更改为 .js 文件，但我认为它在某些时候解决了一些问题，或者我不明白我在做什么。我使用的索引文件是 builds 文件夹中的那个。

【参考方案2】：

您的浏览器窗口应在生产模式下加载build/index.html

    const isDev = require("electron-is-dev");
    if (isDev) 
        mainWindow.loadURL(process.env.ELECTRON_START_URL);
     else 
        mainWindow.loadFile(path.join("build", "index.html"));