基于Vue与Quasar的Electron应用如何加载子BrowserWindow？

核心问题分析 #

你之前的尝试失败，本质是没区分开发/生产环境的资源访问逻辑，且错误地让Vue路由拦截了独立窗口的请求——直接拼接/#/secondWindow会被主应用的路由接管，自然加载主窗口内容。

步骤1：调整文件位置 #

把secondWindow.html和secondWindow.js从/src移到项目根目录的/public文件夹下。/public是Quasar默认的静态资源目录，开发时会被Dev Server直接映射，生产打包时会完整复制到输出目录，无需经过Webpack编译。

步骤2：主进程中编写环境适配的窗口加载代码 #

在你的主进程文件（比如src-electron/main-process/main.js）中，按环境分别处理加载路径：

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

function createSecondWindow() {
  const secondWin = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // 根据你的业务需求配置，若需Node API访问可开启以下选项
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true
    }
  })

  if (process.env.DEV) {
    // 开发环境：直接通过Dev Server访问静态HTML
    secondWin.loadURL(`${process.env.APP_URL}/secondWindow.html`)
    // 可选：打开开发者工具调试
    secondWin.webContents.openDevTools()
  } else {
    // 生产环境：加载本地打包后的静态文件
    // __dirname指向主进程打包后的目录（dist/electron-xxx/xxx/src-electron）
    const staticFilePath = path.join(__dirname, '..', 'public', 'secondWindow.html')
    secondWin.loadFile(staticFilePath)
  }
}

// 按需调用创建窗口的方法，比如在主窗口创建后或者菜单点击事件中
// app.whenReady().then(() => {
//   createSecondWindow()
// })

关键说明 #

• 开发环境：process.env.APP_URL是Quasar Dev Server的地址（比如http://localhost:8080），直接拼接/secondWindow.html就能访问到public下的静态文件，不会被Vue路由拦截。
• 生产环境：必须用loadFile而非loadURL加载本地文件，通过path模块拼接绝对路径——__dirname在打包后指向主进程代码所在目录，往上跳两级就能找到public文件夹。
• 若坚持把文件放在/src：需要修改Quasar的quasar.conf.js，配置build选项中的extendWebpack，将secondWindow.html复制到输出目录，但这种方式不如直接放/public简洁。

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