electron vue 加载白屏

在 Electron 项目中，如果使用 Vue.js 作为前端框架，在启动应用程序时可能会遇到加载白屏的问题。这通常是由于 Vue.js 构建后的代码需要在本地运行，而 Electron 默认情况下不会加载本地文件。

解决这个问题的方法是在主进程中为 Electron 添加一个本地文件访问协议（file://），并将访问限制设置为允许所有来源。可以在主进程中添加以下代码：

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

app.commandLine.appendSwitch('disable-site-isolation-trials');
app.commandLine.appendSwitch('disable-features', 'OutOfBlinkCors');

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      webSecurity: false // 允许加载本地文件
    }
  })

  // 加载 Vue.js 打包后的 HTML 文件
  win.loadFile(path.join(__dirname, 'dist', 'index.html'))

  // 打开开发者工具
  win.webContents.openDevTools()
}

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

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

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

在这个例子中，我们为 `BrowserWindow` 的 `webPreferences` 添加了 `webSecurity: false`，这样就允许加载本地文件了。同时，在 `createWindow` 函数中，我们使用 `loadFile` 方法加载 Vue.js 打包后的 HTML 文件，该文件位于 `dist/index.html`。最后，我们打开开发者工具（`win.webContents.openDevTools()`）以方便调试。

需要注意的是，在生产环境中，应该将 `webSecurity` 设置为 `true`，以避免安全问题。