electron js app编译后显示错误“无法加载本地资源”

camsedfj  于 11个月前  发布在  Electron
关注(0)|答案(1)|浏览(199)

我已经尝试了这么多的解决方案，从互联网和聊天GPT，但没有一个工作，我累了，可以任何Maven帮助？
当我运行“electron.app”时运行完美，但构建后显示白色屏幕和此错误。
第一个月
此外，此图像显示警告，而运行应用程序没有构建
image of warning
这是我在电子主文件中的代码

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


let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 1300,
    height: 1000,
    icon: path.join(__dirname,"/logo.png"),
    webPreferences: {
      nodeIntegration: true,
    },
  });

  mainWindow.loadURL(`file://${path.join(__dirname, '../build/index.html')}`);

  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();
  }
});

字符串
config

{
  "name": "brahmani",
  "version": "0.1.0",
  "private": false,
  "main": "main.js",
  "description": "local app",
  "author": "me",
  "scripts": {
    "electron": "electron .",
    "electron-build": "electron-builder"
  },
  "build": {
    "files": [
      "**/*"
    ],
    "win": {
      "target": "nsis"
    }
  },
  "devDependencies": {
    "electron": "^27.1.3",
    "electron-builder": "^24.9.1"
  }
};

型
React应用工具

{
  "name": "brahmani",
  "version": "0.1.0",
  "private": false,
  "main": "src/main.js",
  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@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",
    "formik": "^2.4.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-icons": "^4.12.0",
    "react-redux": "^8.1.3",
    "react-router-dom": "^6.20.0",
    "react-scripts": "5.0.1",
    "react-to-print": "^2.14.15",
    "serve": "^14.2.1",
    "web-vitals": "^2.1.4",
    "yup": "^1.3.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "build": {
    "directories": {
      "buildResources": "build",
      "app": ""
    },
    "files": [
      "**/*"
    ]
  },
  "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": {
    "tailwindcss": "^3.3.5"
  }
}

型
我使用电子构建器来构建电子应用程序

我在react中安装了路由器，但从未在应用程序中使用

我已经尝试了大约20种不同的方法，并改变了我的代码很多时候没有工作，我认为这是一个简单的错误，但我没有得到它，我也有我的电子应用程序和React应用程序在同一个文件夹和两个应用程序共享一个单一的package.json，它不应该是问题，因为我已经有一个应用程序运行相同的结构。

electron

1条答案

按热度按时间
bbuxkriu

bbuxkriu1#

为了严格回答你的问题，你会得到这个错误，因为你的index.html路径不正确。我无法告诉你应该使用什么路径，因为我不知道你的打包应用文件夹结构是什么样子的，所以你需要自己检查。要做到这一点，你可以暂时禁用asar，看看资源文件夹中的内容，然后修复路径：

"build": {
  "asar": false,
  // ...
},

字符串
我认为你们的配置有几个问题。
当打包你的应用时，你只想打包你需要的东西。在React应用的上下文中，这意味着只打包build文件夹，在那里所有的东西都被整齐地捆绑在一起。对于electron-builder，理想情况下你只需要为files选项打包这个文件夹：

"build": {
  "files": ["./build/**/*"],
  // ...
},

型
你的配置的一个问题是，你在src中有main.js，这意味着它不会被包含在build文件夹中（因为它不被React使用，只被Electron使用）。你有两个解决方案：

1.将main.js包含在build文件夹中，但不要捆绑

您的React应用是使用CRA创建的，它允许您使用public文件夹在构建时添加其他文件和资产。将main.js移动到此文件夹中将使其在build中可用，然后您可以在窗口中加载HMTL：

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

型
您还需要告诉electron-builder从build/main.js文件夹使用main.js，而不是从public/main.js（将在package.json的main上配置）。为此，您可以使用extraMetadata选项将属性注入package.json：

"build": {
  "extraMetadata": {
    "main": "build/main.js"
  },
  // ...
},

型
这种方法的问题是，由于main.js没有捆绑，如果你在主进程上使用额外的依赖项，打包的应用程序可能会抛出“模块未找到”错误（我可能错了，但我认为来自electron和Node.js API的模块不需要捆绑）。要解决这个问题，你需要配置打包器以在包中包含这些额外的模块。

2.将main.js放入build文件夹并捆绑

在我看来，这是最干净的解决方案，但也是最棘手的，因为你的React应用程序是使用CRA创建的，这几乎没有或根本没有编辑配置的可能性。
基本上，你需要添加一个额外的webpack配置来捆绑你的主进程代码（如果你有预加载，你也可以这样做）。要做到这一点，你可以使用一个工具，如craco或react-app-rewired。我从来没有使用过Craco，所以我只能给予你一个配置的例子Rewired：

重写.js

const path = require("path");

module.exports = {
    webpack: (config) => {

      const electronMainConfig = {
        target: "electron-main",
        mode: "production",
        entry: path.join(__dirname, "electron", "main.js"),
        output: {
          ...config.output,
          filename: "static/js/electron.main.js"
        }
      }

      return process.env.NODE_ENV === "development"
        ? config
        : [config, electronMainConfig]
    }
};

型
在这个例子中，main.js在electron/main.js中，它将被捆绑为build/static/js/electron.main.js。
请注意，在构建时，您将得到错误：

Cannot read properties of undefined (reading 'publicPath')

型
这是因为CRA未配置为处理多个webpack配置。它不会中断进程，因此可以忽略（仅供参考）。
现在，要在窗口中加载应用程序，您可以使用用途：

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

型
在打包器配置中：

"build": {
  "extraMetadata": {
    "main": "build/static/js/electron.main.js"
  },
  // ...
},

型

附加信息：

对于使用CRA创建的应用，您需要在package.json中的homepage字段中指定为应用提供服务的路径：

{
  "homepage": "./",
  // ...
}

型
如果你忘记了这一点，你可能会在生产中得到一个空白页。

赞(0）分享  回复(0）举报  11个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com