如何解决Vue Electron应用打包后启动出现白屏的问题

问题修复方案 #

1. 修正background.js代码错误 #

你当前的代码存在2个直接导致白屏的语法/逻辑问题：

• 缺失path、url模块引入，直接调用path.join、url.format会抛出未定义错误，阻塞页面加载
• 生产环境页面加载逻辑错误，你已经调用了createProtocol('app')注册了app协议，不需要自行拼接file协议路径，且你填写的/dist/index.html相对路径与打包后实际文件结构不匹配

修正后的生产环境分支代码如下：

// 先在文件顶部补充模块引入
import path from 'path'
import url from 'url'

// ...省略其他不变代码...

  } else {
    createProtocol('app')
    // 替换原有loadURL逻辑
    win.loadURL('app://./index.html')
  }

2. 修正Vue Router配置 #

Vue Router默认的HTML5 History模式不支持file协议加载，生产环境打包后没有服务端做路由 fallback 会直接匹配失败导致白屏，需要改为hash模式：

• Vue2项目：修改router/index.js配置，将mode: 'history'改为mode: 'hash'
• Vue3项目：修改router/index.js配置，将createWebHistory()改为createWebHashHistory()

3. 可选排查手段 #

如果修改后仍有白屏问题，可以在createWindow函数中添加开发者工具唤起代码，打包后也能直接查看控制台报错定位问题：

const win = new BrowserWindow({
  // ...省略窗口配置...
})
// 加在new BrowserWindow之后即可
win.webContents.openDevTools()

内容的提问来源于stack exchange，提问作者Graham Morby