Question

我对Electron以及如何将React Web应用程序打包为本地应用程序非常了解。

我正在实现React Web应用程序，并希望打包到本机应用程序中。我选择电子包装器包装。

我的问题是当我打开本机应用程序时。它仅显示index.html中的内容，而屏幕上没有任何反应组件显示。

这就是我创建反应应用的方式

baseline-shift

这是我的项目结构 https://github.com/facebook/create-react-app

这是我的electron.js

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;

const path = require('path');
const url = require('url');

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

function createWindow() {
  mainWindow = new BrowserWindow({width: 1366, height: 675});
  mainWindow.setMenu(null)
  mainWindow.loadURL(startUrl)
  mainWindow.webContents.openDevTools()
  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();
  }
});

这是我与电子配置有关的package.json

{
  ...,
  "devDependencies": {
    "concurrently": "^3.6.1",
    "electron": "^2.0.5",
    "electron-packager": "^12.1.1",
    "wait-on": "^2.1.0"
  },
  "main": "./electron.js",
  "homepage": "./",
  "build": {
    "dir": "./build",
    "files": [
      "build/**/*",
      "node_modules/**/*"
    ],
    "directories":{
      "buildResources": "assets"
    }
  }
}

这就是我运行打包应用程序的方式

electron-packager . MyCoolApp --platform=linux --arch=x64 --no-prune --ignore=/node_modules --ignore=/src

这是我的结果 project structure

这就是我想要的 Native app 请帮忙谢谢

使用电子打包程序打包Web应用程序时没有反应组件

0 个答案: