javascript 电子构建生成错误的index.html和renderer.js文件

我的电子应用程序在开发模式下工作正常（yarn run start）。但是，当我试图使用"yarn dist"命令构建应用程序时，它的处理没有任何问题。但是，当单击安装文件并打开应用程序时，我可以看到它指向错误的index.html & renderer.js。因此，我得到以下错误。

- 我的应用程序的文件夹结构如下-**

- 我的package.json文件结构是-**

{
  "name": "electron-webpack-quick-start",
  "version": "1.0.0",
  "license": "MIT",
  "author": {
    "name": "Suresh",
    "email": "suresh@gmail.com",
    "url": "https://example.com"
  },
  "main": "main.js",
  "description": "Test App",
  "scripts": {
    "dev": "electron-webpack dev",
    "compile": "electron-webpack",
    "dist": "yarn compile && electron-builder",
    "dist:dir": "yarn dist --dir -c.compression=store -c.mac.identity=null",
    "pack": "electron-builder --dir",
    "start": "electron .",
    "postinstall": "electron-builder install-app-deps"
  },
  "dependencies": {
    "source-map-support": "^0.5.16"
  },
  "devDependencies": {
    "electron": "^22.0.3",
    "electron-builder": "^22.4.1",
    "electron-webpack": "^2.8.2",
    "webpack": "~4.42.1"
  },
  "build": {
    "appId": "com.example.app",
    "files": [
      "package.json",
      "main.js",
      "preload.js",
      "renderer.js",
      "index.html",
      "node_modules",
      "main.exe"
    ],
    "win": {
      "target": "nsis"
    },
    "dmg": {
      "background": null,
      "backgroundColor": "#ffffff",
      "window": {
        "width": "400",
        "height": "300"
      },
      "contents": [
        {
          "x": 100,
          "y": 100
        },
        {
          "x": 300,
          "y": 100,
          "type": "link",
          "path": "/Applications"
        }
      ]
    },
    "mac": {
      "target": "dmg",
      "category": "public.app-category.utilities"
    },
    "linux": {
      "target": "AppImage",
      "category": "Utility"
    }
  }
}

- 索引. html**

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <meta
      http-equiv="X-Content-Security-Policy"
      content="default-src 'self'; script-src 'self'"
    />
    <title>Hello from Electron renderer!</title>
  </head>
  <body>
    <h1>Hello from Electron renderer!</h1>
    <p>👋</p>
    <p id="info"></p>
  </body>
  <script src="./renderer.js"></script>
</html>

- 主文件. js**

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

const createWindow = () => {
    const win = new BrowserWindow({
        width: 1000,
        height: 700,
        webPreferences: {
            preload: path.join(__dirname, 'preload.js'),
            nodeIntegration: true
        },
    });

    win.loadFile(path.join(__dirname, 'index.html'));

};

app.whenReady().then(() => {
    let backend;
    backend = path.join(process.cwd(), 'main.exe')
    var execfile = require('child_process').execFile;
    execfile(
        backend,
        {
            windowsHide: true,
        }, (err, stdout, stderr) => {
            if (err) {
                console.log('1.Flask Server Error: ', err);
            } if (stdout) {
                console.log('Flask Server Started: ', stdout);
            } if (stderr) {
                console.log('2.Flask Server Error: ', stderr);
            }
        }
    )

    createWindow();

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

app.on('window-all-closed', () => {
    exec('taskkill /f /t /im main.exe', (err, stdout, stderr) => {
        if (err) {
            console.log('taskkill error: ', err)
            return;
        }

        console.log('stdout: ', stdout)
        console.log('stderr: ', stderr)
    });

    console.log('application gogin to close...')
    console.log('process.platform: ', process.platform)

    if (process.platform !== 'darwin') {
        app.quit();
    }
});

- 预加载. js**

const { contextBridge } = require('electron')

contextBridge.exposeInMainWorld('versions', {
    node: () => process.versions.node,
    chrome: () => process.versions.chrome,
    electron: () => process.versions.electron,
    // we can also expose variables, not just functions
})

- 渲染器. js**

const information = document.getElementById('info')
information.innerText = `This app is using Chrome (v${versions.chrome()}), Node.js (v${versions.node()}), and Electron (v${versions.electron()})`

function pingServer() {
    fetch('http://127.0.0.1:5000/')
        .then((response) => response.text())
        .then((text) => {
            console.log('Server message: ', text);
            setText("server_msg", text)
        });
}

function setText(id, newvalue) {
    var s = document.getElementById(id);
    s.innerHTML = newvalue;
}

我做错什么了吗？需要帮助。

是的，我在用electron-builder开发跨平台时就解决了这个问题。
问题是在Intel Mac和Windows上，文件和文件夹位于与开发模式下不同的目录中。
虽然我不能直接告诉你如何修复它，但这只是一个正确获得相对导入的问题，你可以通过与win-unpacked文件夹中的内容进行比较来查看。
但您可以使用类似的语句：
var isDev = process.env.APP_DEV ? (process.env.APP_DEV.trim() == "true") : false;在你的各种javascript和html中，APP_DEV=true在你的npm run start或electron .中，或者像你所说的yarn run start（就像把它放在start脚本下的packages.json中一样。
编辑：为了澄清，为了检查，查看win-unpacked目录，您将看到您的__dirname可能需要其他内容。
对我来说，我在Windows上使用var dirname = path.join(process.resourcesPath, '..');，然后用dirname替换__dirname

javascript 电子构建生成错误的index.html和renderer.js文件

1条答案

相关问题

热门标签

最新问答