如何让构建后的Electron.js应用支持局域网访问？

核心原因 #

开发模式下Quasar内置的开发服务器默认监听所有网络接口（0.0.0.0），所以局域网设备能通过IP:9300直接访问；但构建完成后，Electron默认加载本地静态文件（file://协议），没有内置HTTP服务器，因此无法通过IP端口的方式对外提供访问。

简便开箱即用方案 #

1. 构建时启用内置服务器（推荐） #

直接在Quasar配置中开启构建后的内置HTTP服务，复用开发模式的访问逻辑：

• 修改quasar.config.js的Electron配置，指定服务器监听地址和静态文件目录：

  // quasar.config.js
  module.exports = function (ctx) {
    return {
      electron: {
        // 保留原有Electron配置
        packager: {},
        builder: {},
        // 配置构建后启动的HTTP服务器
        devServer: {
          host: '0.0.0.0',
          port: 9300,
          static: {
            directory: ctx.mode.spa ? 'dist/spa' : 'dist/ssr'
          }
        },
        entry: 'src-electron/main-process/electron-main.js'
      }
    }
  }
  

• 修改Electron主进程文件（src-electron/main-process/electron-main.js），让窗口加载服务器地址而非本地文件：

  const { app, BrowserWindow } = require('electron')
  const path = require('path')
  
  function createWindow () {
    const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js')
      }
    })
  
    // 开发/构建模式统一加载服务器地址
    mainWindow.loadURL('http://0.0.0.0:9300')
  }
  
  app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
  
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })
  

• 执行构建命令：quasar build -m electron，构建完成后启动应用，局域网内设备即可通过你的IP:9300访问。

2. SPA模式构建+Quasar内置服务器 #

如果不需要Electron窗口，仅需让构建后的前端支持局域网访问，可直接用SPA模式构建后启动内置服务：

• 构建SPA产物：quasar build -m spa
• 启动局域网可访问的服务器：quasar serve dist/spa --host 0.0.0.0 --port 9300
  此方式和开发模式体验完全一致，无需额外配置。

3. 嵌入轻量HTTP服务器到Electron包 #

在Electron应用中嵌入轻量服务器（如http-server），打包后自动启动：

• 安装依赖：npm install http-server --save-dev
• 修改Electron主进程，启动服务器后加载对应地址：

  const { app, BrowserWindow } = require('electron')
  const path = require('path')
  const httpServer = require('http-server')
  
  function createWindow () {
    // 启动HTTP服务器托管构建产物
    const server = httpServer.createServer({
      root: path.join(__dirname, '../../dist/spa')
    })
    server.listen(9300, '0.0.0.0', () => {
      console.log('Server running on http://0.0.0.0:9300')
    })
  
    const mainWindow = new BrowserWindow({
      width: 800,
      height: 600,
      webPreferences: {
        preload: path.join(__dirname, 'preload.js')
      }
    })
  
    mainWindow.loadURL('http://0.0.0.0:9300')
  }
  
  // 剩余生命周期代码和之前一致
  

• 构建后启动应用，服务器会自动运行，局域网设备可直接访问。

注意事项 #

• 确保本地防火墙允许9300端口的入站连接
• 若9300端口被占用，可修改配置中的port值为其他空闲端口

内容的提问来源于stack exchange，提问作者imv