Quasar框架Electron模式下如何打开子窗口并加载Vue3路由

以下是具体排查和修复方向：

1. 确认process.env.APP_URL的正确性 #

Quasar在Electron开发环境下，APP_URL默认是http://localhost:8080，打包后会转为file://开头的本地文件路径。如果该变量未正确注入或路径错误，loadURL会执行失败，窗口可能看似未打开（实际可能打开但处于白屏状态）。

先在主进程中打印变量值确认：

console.log('当前APP_URL:', process.env.APP_URL);

若路径异常，可手动区分开发/生产环境指定URL：

win.loadURL(process.env.DEV ? 'http://localhost:8080/details' : `${process.env.APP_URL}/details`);

2. 添加错误捕获与调试逻辑 #

你的代码缺少错误处理，无法定位具体问题。给窗口添加加载监听，并给IPC调用增加异常捕获：

主进程代码修改： #

ipcMain.handle('details', async (event, payload) => {
  try {
    const win = new BrowserWindow({ 
      width: 800,
      height: 600,
      autoHideMenuBar: true,
      webPreferences: {
        contextIsolation: true,
        sandbox: false,
      }
    });

    // 监听页面加载失败事件
    win.webContents.on('did-fail-load', (_, errorCode, errorDesc) => {
      console.error('子窗口加载失败:', errorCode, errorDesc);
    });

    // 监听子窗口控制台日志，方便排查渲染端问题
    win.webContents.on('console-message', (_, level, msg) => {
      console.log(`子窗口日志[${level}]:`, msg);
    });

    await win.loadURL(`${process.env.APP_URL}/details`);
  } catch (err) {
    console.error('创建子窗口失败:', err);
    throw err; // 将错误返回给渲染进程
  }
});

渲染进程调用时增加捕获： #

// 在Vue组件中调用IPC方法时
try {
  await window.electron.details(payload);
} catch (err) {
  console.error('调用打开子窗口接口失败:', err);
}

3. 正确配置@electron/remote（若使用该方案） #

如果想用@electron/remote在渲染进程直接创建窗口，需完成以下配置：

主进程初始化remote： #

// electron-main.ts 顶部
import { app } from 'electron';
import remoteMain from '@electron/remote/main';

remoteMain.initialize();

// 允许主窗口使用remote模块
app.on('browser-window-created', (_, window) => {
  remoteMain.enable(window.webContents);
});

渲染进程（preload或Vue组件）中使用： #

// preload脚本内
import { remote } from '@electron/remote';
const { BrowserWindow } = remote;

// 改写IPC方法
details: (payload: any) => {
  const win = new BrowserWindow({ 
    width: 800,
    height: 600,
    autoHideMenuBar: true,
    webPreferences: {
      contextIsolation: true,
      sandbox: false,
    }
  });
  win.loadURL(`${process.env.APP_URL}/details`);
}

4. 检查Vue路由配置 #

确保你的Vue路由中存在/details路径的路由规则，且对应组件能正常渲染。开发环境下可直接在浏览器访问http://localhost:8080/details，验证路由是否正常工作。

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