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

【问题标题】：How do I implement Electron's webview into my Vue project?如何在我的 Vue 项目中实现 Electron 的 webview？
【发布时间】：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 选项卡
啊我的坏...一秒钟。

标签： vue.js webview electron

【解决方案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 项目而是使用普通电子项目
你的电子版是？