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

const { app, BrowserWindow } = require('electron')

function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadURL('http://your-vue-project-url') // 替换为你的Vue项目的URL

  // 其他窗口配置和事件处理
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessFile: 'src/main.js', // 替换为你创建的Electron主进程文件的路径
      rendererProcessFile: 'src/background.js', // 替换为你的Vue项目的入口文件路径
      // 其他electron-builder配置
    }
  }
}

<template>
  <div>
    <webview src="http://your-external-website-url"></webview> <!-- 替换为你想要加载的外部网页的URL -->
  </div>
</template>

<script>
export default {
  // 组件的其他配置和方法
}
</script>

<style>
/* 组件的样式 */
</style>

npm run serve
npm run electron:serve