前言：
请确保已搭建好vue+electron的一个项目，详情参考：用vue-cli+Electron开发桌面应用（搭建vue项目、安装electron），更多相关信息，参考作者往期博客

具体描述

1. 将loadpage.html作为加载页面，该页面主要是无边窗口loading的页面布局和样式，存在项目的public文件夹下
2. webContents.loadURL(url[, options]),在窗口中加载url, url必须包含协议前缀,比如http://或file://.如果加载想要忽略http缓存，可以使用pragma头来达到目的.

background.js设置如下:

import { app, protocol, BrowserWindow, ipcMain, Menu} from 'electron'
import {
  createProtocol
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'

let win
let loading
protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true }}])

function createWindow() {
  win = new BrowserWindow({
    width: 1122,
    height: 670,
    show: false, // 一开始是false,loadpage加载完毕的时候为true
    webPreferences: {
      nodeIntegration: true,
      webSecurity: false // 允许跨域
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    setTimeout(() => { // 关闭loadpage的时候，将win, show true
      loading.hide()
      loading.close()
      win.show()
      win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    }, 5000)
    win.webContents.closeDevTools() 
  } else {
    setTimeout(() => {
      loading.hide()
      loading.close()
      win.show()
      createProtocol('app')
      win.loadURL('app://./index.html')
    }, 5000)
    win.webContents.closeDevTools() // 关闭调试模式
  }

  win.on('closed', () => {
    win = null
    app.quit();
  })

  win.on('close', function(_event) {
   app.quit();
  })
}

function showLoading(callback) {
  loading = new BrowserWindow({
    show: false,
    frame: false,
    width: 360,
    height: 360,
    resizable: false
  })
  loading.once('show', callback)
  loading.loadURL(`file://${__static}/loadpage.html`) // 将loadpage作为加载页面，该页面存在项目的public文件夹下
  loading.show()
}

function initApp() {
  showLoading(createWindow)
}

app.on('activate', () => {
  if (win === null) {
    initApp()
  }
})

app.on('ready', async() => {
    initApp()
  })

更多信息参考：项目中的background.js文件。