Windows环境下Vue3项目使用electron-builder打包后白屏如何修复

修复步骤 #

1. 修复router.js语法错误
   你当前的路由配置缺少必填的routes字段，也没有导出路由实例，对象结构不合法会直接导致Vue初始化失败白屏，修改为如下代码：

import { createWebHistory, createRouter, createWebHashHistory } from 'vue-router';
import Home from '@/views/Home.vue';

const router = createRouter({
  history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    }
  ]
})
export default router;

2. 删除background.js中的无效监听代码
   你写的win.on("Amir Travel Agency", (event) => event.preventDefault());不属于Electron原生支持的窗口事件，会触发运行时报错，直接删除该行即可。

3. 补充vue.config.js配置
   在项目根目录的vue.config.js中添加如下配置，确保静态资源路径正确：

module.exports = {
  publicPath: './',
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

4. 打包后开启控制台定位问题
   如果修改后还是白屏，可以在production分支的win.loadURL('app://./index.html')代码后临时添加win.webContents.openDevTools()，打包运行后打开控制台查看具体报错信息，针对性修复。

内容的提问来源于stack exchange，提问作者Yasir Iqbal