使用Electron将Angular项目（进行RESP API调用）转换为桌面应用程序

Question

我有一个功能齐全的Angular前端，它向在8080端口上运行的Spring Boot后端进行REST Api调用。我需要将此Web应用程序转换为桌面应用程序。我知道很容易使用electron。我在这个问题下关注了多个话题，但找不到答案。如何通过修改main.js文件来实现此目的？还是我需要修改项目中进行api调用的每个地方？我已将应用程序加载到窗口，但它与后端没有通信。

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

  let appWindow

function initWindow() {
appWindow = new BrowserWindow({
  width: 1000,
  height: 800,
  webPreferences: {
    nodeIntegration: true
  }
})

// Electron Build Path
appWindow.loadURL(
  url.format({
    pathname: path.join(__dirname, `/dist/index.html`),
    protocol: "file:",
    slashes: true
  })
);

// Initialize the DevTools.
appWindow.webContents.openDevTools()

appWindow.on('closed', function () {
  appWindow = null
})}

app.on('ready', initWindow)

// Close when all windows are closed.
app.on('window-all-closed', function () {

// On macOS specific close process
if (process.platform !== 'darwin') {
  app.quit()
}
})

app.on('activate', function () {
if (win === null) {
  initWindow()
}
})

Answer 1

我认为转换Angular应用程序的最佳方法是，使用Angular电子样板并将内容从应用程序移动到电子应用程序。我建议您为此使用maximegris /angular-electron样板。

对于API调用，您现在不需要弄乱main-process。 Angular应用程序将在renderer process上运行，并在其中保持您的应用程序逻辑。