electron-vite搭建的项目报错 You can mark the path "vue" as external to exclude it from the bundle, which will remove this error.解决办法

如果你在使用 electron-vite 搭建的项目中出现了 `You can mark the path "vue" as external to exclude it from the bundle, which will remove this error.` 的错误提示，这通常是由于 Vue 被打包进了 bundle 中，导致了重复引用的问题。

解决这个问题的方法跟 Vite 类似，需要在 `main.js` 和 `renderer.js` 中将 Vue 标记为外部依赖项，从而将其从 bundle 中排除掉。具体实现方式如下：

在 `main.js` 中：

const { app, BrowserWindow } = require('electron')
const { createProtocol } = require('vue-cli-plugin-electron-builder/lib')

let win

function createWindow() {
  // ...

  // 将 Vue 标记为外部依赖项
  win.webContents.on('did-frame-finish-load', () => {
    win.webContents.executeJavaScript(`
      const { ipcRenderer } = require('electron')
      window.ipcRenderer = ipcRenderer
      window.process = { env: { NODE_ENV: 'production' } }
    `)
    win.webContents.executeJavaScript(`window.process = { env: { NODE_ENV: 'production' } }`)
  })
}

在 `renderer.js` 中：

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

// 将 Vue 标记为外部依赖项
window.process = { env: { NODE_ENV: 'production' } }

这样就可以解决 `You can mark the path "vue" as external to exclude it from the bundle, which will remove this error.` 的错误提示了。需要注意的是，如果你的项目中使用了其他类似的第三方库，也可以通过类似的方式将其标记为外部依赖项，避免出现类似的问题。