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

Question

我有以下代码，但是当我运行我的应用程序并查看开发工具时，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

Answer 1

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

webviewTag是webPreferences

的字段

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

How do I implement Electron's webview into my Vue project?

webview

vue.js

electron