如何在生产版本中正确设置Win10上电子应用程序的入口点/起始页

时间:2019-04-07 10:55:46

标签: reactjs electron

我已经创建了一个React应用,并希望将其包裹在电子中以在win10上运行,因为该应用需要node-seriaport。 在开发模式下一切正常,但是在生产模式下(即打包时),我无法使应用正常运行。 该应用程序在错误的页面上启动,并且由于路由/路径不正确,无法正确加载多余资源中的图像和文件。

打包本身可以正常工作,但是当我运行.exe文件时,应用程序将在404路由上启动,我已经将它实现为react-router中的catch。在chrome控制台中登录时,应用程序实际要去的地方,我看到以下路线: pathname: "/C:/UserData/somefolder/otherfolder/dist/win-unpacked/resources/app.asar/build/index.html" -如果开头没有/,这是正确的。 我在extraResource文件夹中有一些文件,但是我无法以生产/打包模式访问此文件夹,在Chrome的“源”选项卡中,extraResources文件夹不是主应用程序目录的一部分,而是单独显示,这意味着可以预期处于C:\下,如何正确配置? Chrome Sources Tab

正如在开发人员模式中所说,一切正常。 我认为这一切都始于进入点的正确路线,有人能不能给我一个提示我要做什么才能正常工作?

这是我的package.json

{
  "name": "app-name",
  "version": "0.1.0",
  "private": true,
  "main": "./public/electron.js",
  "author": "CG",
  "description": "description",
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "electron": "set ELECTRON_START_URL=http://localhost:3000 && electron .",
    "rebuild": "./node_modules/.bin/electron-rebuild -f -w serialport",
    "electron-pack": "build --win --x64 --dir"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "electron": "^4.0.4",
    "electron-packager": "^13.1.1",
    "electron-rebuild": "^1.8.4"
  },
  "build": {
    "appId": "com.wmt.wmt-1",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories":{
      "buildResources": "public"
    },
    "extraResources": [
      {
        "from": "./public/extraResources/",
        "to": "extraResources",
        "filter": [
          "**/*"
        ]
      }
    ]
  },
  "win": {
    "icon": "/public/img/icon.png"
  },
  "homepage": "./"
}

这是electron.js文件:

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

let mainWindow

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

function createWindow () {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false
    }
  });

  mainWindow.loadURL(startUrl);

  // Open the DevTools.
  mainWindow.webContents.openDevTools()

  // Emitted when the window is closed.
  mainWindow.on('closed', function () {
    mainWindow = null
  })
}

app.on('ready', () => {
  createWindow()
});

0 个答案:

没有答案