如何在我的 Vue 项目中实现 Electron 的 webview？

Posted 2023-02-22

【中文标题】如何在我的 Vue 项目中实现 Electron 的 webview？

【英文标题】：How do I implement Electron's webview into my Vue project?

【发布时间】：2020-08-23 05:18:57

【问题描述】：

我有以下代码，但是当我运行我的应用程序并查看开发工具时，webview 标签在 DOM 中，但我的屏幕上没有显示任何内容...

function createWindow() 
  // Create the browser window.
  win = new BrowserWindow(
    webviewTag: true,
    width: 1276, 
    height: 800, 
    frame: false, 
    titleBarStyle: 'hiddenInset',
    center: true, 
    movable: true,
    webPreferences: 
      nodeIntegration: true
    
  )


In my component: 

<webview id="foo" src="https://www.youtube.com/" style="display:inline-flex; width:640px; height:480px"></webview>

dev tools screenshot

【问题讨论】：

你能分享开发工具控制台吗？

@tpikachu 我上传了一张图片。

哦，伙计。我需要控制台图像

这是元素选项卡。您可以在开发工具顶部看到 Console 选项卡

啊我的坏...一秒钟。

【参考方案1】：

  const win = new BrowserWindow(
    width: 1276, 
    height: 800, 
    frame: false, 
    titleBarStyle: 'hiddenInset',
    center: true, 
    movable: true,
    webPreferences: 
      nodeIntegration: true,
      webviewTag: true,
    
  )

webviewTag 是webPreferences 的字段

【讨论】：

好的，我把它改成了 webPreferences，但是结果是一样的。在 DOM 中，没有控制台消息。

这很有趣......它有点工作。在渲染 webview 之前，我必须启动电子并在开发工具中搜索 webviews...知道在启动时渲染的解决方案吗？

嘿，你得到答案了吗？我也在寻找解决方案，文档没有帮助！

@tpikachu 奇怪的是，它不是使用 Angular 项目而是使用普通电子项目

你的电子版是？