electron加载非本地web项目方式

122 阅读1分钟

两种常见方式

  • 使用 BrowserWindow 直接打开远程地址(最简单)
  • 在渲染进程里用  嵌入远程地址(需要开启 webviewTag)

方式 A:直接加载远程地址(推荐最简)

在 electron-app/src/main/index.ts 的创建窗口处,改为加载你的 URL:

typescript

mainWindow.loadURL('http://127.0.0.1:5006/milk-donation/Index/head/menu/donate/detail/info?tenant_id=100003')

代码位置参考:

index.ts

    webPreferences: {

      preload: join(__dirname, '../preload/index.js'),

      sandbox: false

    }

你可以临时用上面的 loadURL 替换当前 dev/prod 分支逻辑(或只在某个环境下生效)。

方式 B:使用 (需要开启 webviewTag)

  1. 在 BrowserWindow 开启 webviewTag:

typescript

webPreferences: {

  preload: join(__dirname, '../preload/index.js'),

  sandbox: false,

  webviewTag: true

}

  1. 在渲染进程的页面(例如 renderer/index.html 或你的根组件)放置:

html

<webview

  src="http://127.0.0.1:5006/milk-donation/Index/head/menu/donate/detail/info?tenant_id=100003"

  style="width:100%; height:100%;"

  allowpopups

注意事项

  • 安全:加载远程内容时,建议保持 contextIsolation: true(如有需要在 preload 暴露受控 API),并限制可允许的域名。
  • 外链处理:主进程里你已用 setWindowOpenHandler 拦截外链, 内部弹窗需 allowpopups 或在内里自行处理。

我建议:如果只是把远程系统直接展示,优先用方式 A;如果需要在你的页面 UI 框架内嵌多个外部页面或做更细粒度隔离,再选方式 B。

  • 修改点:说明了如何在 BrowserWindow 中直接 loadURL,以及如何开启 webviewTag 并在渲染进程添加  标签(含你的具体 URL)。