Javascript 使用Electron将Angular Framework应用程序转换为桌面应用程序

项目说明：

我有一个功能强大的前端angularjs应用程序，它与另一个后端Java应用程序通信，该应用程序部署在tomcat中，运行在不同的port8443上。我一直在网络浏览器上运行它，但现在我想将其作为桌面应用程序运行。我一直把它作为grunt服务于开发环境和grunt-clean-prod用于生产和分发。 当使用grunt服务在开发模式下运行时，应用程序将在

问题:

我如何让应用程序在electron for dev模式下运行，然后将其打包用于生产？我尝试过，但它无法与端口上的备份应用程序通信

请帮忙。

以下是如何

一,。样板代码

const electron = require('electron');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

function createWindow () {
  mainWindow = new BrowserWindow({width: 800, height: 600});
  mainWindow.loadURL(`file://${__dirname}/index.html`);

  //Take note of this line.
  //mainWindow.loadURL(`http://localhost:9000`);

  mainWindow.on('closed', function () {
    mainWindow = null;
  });
}
app.on('ready', createWindow);

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') {
    app.quit();
 }
})

app.on('activate', function () {
  if (mainWindow === null) {
    createWindow();
  }
});

二,。注意行mainWindow.loadURL'file://${uuuu dirname}/index.html'。由于您的用例是与在端口上运行的另一个后端应用程序通信，因此使用文件protocol file://将不起作用，您需要与http协议上的端口通信

三,。为了实现这一点，我建议在您的electron应用程序中运行一个静态文件http服务器，在本地服务器上运行您的应用程序，并将mainWindow.loadURL'file://${uuu dirname}/index.html'行替换为mainWindow.loadURL`http://localhost:9000`这个

编辑1： 您可以像这样运行一个非常基本的静态文件服务器，但是肯定有更好的方法来编写它

var express = require('express');
var server = express();
server.use('/', express.static(__dirname + '/'));
server.listen(9000);

编辑2：

在评论中进行了一些讨论之后，我决定克隆回购协议并自己添加电子部分，我是这样做的

一,。通过运行安装以下依赖项

npm install --save electron express

二,。index.js文件

const electron = require('electron');
const path = require('path');
const app = electron.app;
const BrowserWindow = electron.BrowserWindow;
let mainWindow = null;

var express = require('express');
var server = express();
let dir = path.join(__dirname, './dist/community-app');
server.use('/', express.static(dir));
server.listen(9000);

function createWindow() {
    mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    });

    mainWindow.loadURL(`http://localhost:9000`);

    mainWindow.on('closed', function () {
    mainWindow = null;
    });
}
app.on('ready', createWindow);

app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') {
        app.quit();
    }
})

app.on('activate', function () {
    if (mainWindow === null) {
        createWindow();
    }
});

三,。在package.json中添加以下脚本

"scripts": {
//...
  "start": "electron ."
 },

四,。结果

PS：我在构建angularjs项目时遇到了一些问题，因为windows项目中没有构建脚本，因此页面中缺少一些样式

吉特回购：

---

您可以将它粘贴到样板代码下面，它应该可以工作。当然，要确保在依赖项中包含express，它不是nodejs内置模块。在看到代码之前，我无法说出确切的问题。也许你有一个git回购或者我可以检查的东西？在上面。请删除最后一条评论，不要在这样的开放设置中共享凭据。在git repo上查找合并请求@IppezRobertHi Nishkal Kashyap，要构建该项目，请遵循README.MD文件github.com/openMF/community-app/blob/develope/README.MD中的说明，并将PR发送到我的github报告中。我已经发布了一个非常详细的答案，您还期待什么？