vue3 - electron vue的改动态路由打包后白屏,有成功的没？

Question

而且我的设置页打开会白屏闪一下 相关问题录制请看我bilibili
https://www.bilibili.com/video/BV1GdvDBDEeq/

const router = createRouter({
    history: createWebHashHistory(),
    linkActiveClass: 'link-active',
    routes: routes,
})

import {BrowserWindow, app, dialog} from "electron";
import path from "path";
import eventEmitter from "@/main/event";
import {t} from "@/main/i18n";

const window = async () => {
    let mainWindow = new BrowserWindow({
        width: 1300,
        height: 803,
        minWidth: 1300,
        minHeight: 803,
        title: app.getName(),
        // frame:false,
        titleBarStyle: "hidden",
        minimizable: true,
        maximizable: true,
        // transparency: true,
        // backgroundColor: "#00000000",
        vibrancy: "under-window",
        visualEffectState: "followWindow",
        // alwaysOnTop: true,
        fullscreenable: true,
        // opacity:0.9,
        fullscreen: false,
        // show: false,
        closable: true,
        autoHideMenuBar: true,
        webPreferences: {
            webgl: true,
            // devTools: process.env.NODE_ENV === 'development',
            nodeIntegration: true,
            contextIsolation: true,
            webSecurity: true,
            sandbox: true,
            backgroundThrottling: false,
            preload: path.join(__dirname, 'preload.js'),
            defaultFontFamily: 'sansSerif'
        }
    });
    mainWindow["name"] = "main";
    // mainWindow.setFullScreenable(true)
    // mainWindow.setFullScreen(false)
    // 使用相对路径加载 asar 文件中的 HTML
    // const appPath = app.getAppPath();
    // const indexPath = path.join(appPath, 'app.asar', 'index.html');
    // mainWindow.loadURL(`file://${indexPath}`);
    if (process.env.NODE_ENV === 'development') {
        await mainWindow.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
    } else {
        await mainWindow.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
    }
    eventEmitter.on('messageFromVM', (message) => {
        try {
            if (mainWindow && mainWindow.webContents && !mainWindow.webContents.isDestroyed()) {
                mainWindow.webContents.send(`task:console`, message)
            }
        } catch (_) {}
    })

    // 退出确认：点击主窗口的关闭按钮时先弹框确认
    let isQuittingApp = false;
    app.on('before-quit', () => { isQuittingApp = true; });
    mainWindow.on('close', (e) => {
        if (!isQuittingApp) {
            e.preventDefault();
            const result = dialog.showMessageBoxSync(mainWindow, {
                type: 'question',
                title: t('message.exitConfirmTitle'),
                message: t('message.exitConfirmMessage'),
                detail: t('message.exitConfirmDetail'),
                buttons: [t('message.exitConfirmCancel'), t('message.exitConfirmExit')],
                defaultId: 1,
                cancelId: 0,
            });
            if (result === 1) {
                // 先关闭所有子窗口（使用 destroy 避免重复 close 事件）
                BrowserWindow.getAllWindows().forEach((win) => {
                    if (win !== mainWindow && !win.isDestroyed()) {
                        win.destroy();
                    }
                });
                isQuittingApp = true;
                app.quit();
            }
            // 用户取消则不做处理
        }
    });
    return mainWindow;
};
export default window

Answer 1

根据你描述的 Electron-Vue 动态路由打包后白屏问题及代码片段，以下是解决方案和优化建议：

---

主要问题分析

1. 动态路由加载失败
   Vue Router 的动态路由 (component: () => import(...)) 在 Electron 生产环境中可能因路径问题导致组件未加载。
2. 白屏闪烁
   窗口初始化时渲染进程未完全就绪，或 CSS/资源加载延迟导致。
3. 潜在配置问题
   窗口的 webPreferences 配置（如 sandbox: true）可能限制路由功能。

---

解决方案

1. 修复动态路由加载问题

在 路由配置文件 中，修改动态导入语法为绝对路径：

// 原写法（可能失效）
component: () => import('./views/DynamicPage.vue')

// 改为绝对路径
component: () => import(/* webpackMode: "eager" */ path.resolve(__dirname, 'src/views/DynamicPage.vue'))

关键配置：在 vue.config.js 中添加 Webpack 路径别名：

// vue.config.js
const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src')
      }
    }
  }
}

2. 消除白屏闪烁

在 窗口初始化代码 中：

const mainWindow = new BrowserWindow({
  // ...其他配置
  show: false, // 先隐藏窗口
  backgroundColor: '#2e2c29' // 设置背景色与应用主题一致
});

// 页面加载完成后显示窗口
mainWindow.once('ready-to-show', () => {
  mainWindow.show();
});

3. 优化 WebPreferences 配置

webPreferences: {
  // ...
  sandbox: false, // 关闭沙箱模式（解决部分路由限制）
  webSecurity: false, // 允许加载本地资源（生产环境需谨慎）
  nodeIntegration: true, // 确保为 true
}

4. 生产环境路由基准路径

在 router/index.js 中指定基础路径：

const router = createRouter({
  history: createWebHashHistory(process.env.NODE_ENV === 'production' ? './' : '/'),
  // ...
})

---

其他关键建议

1. 检查打包后资源路径
   确保 dist 目录中的 index.html 正确引用了 JS/CSS 文件，静态资源路径应为相对路径（如 ./js/app.js）。

2. 预加载策略
   在 preload.js 中验证 Node.js 模块是否可用：

   // preload.js
   window.electron = {
     require: require
   };

3. 调试生产环境
   通过以下命令启动打包后的应用，查看控制台报错：

   electron --inspect=5858 ./dist

   在 Chrome 中访问 chrome://inspect 调试。

---

最终代码优化点

// main.js 窗口修改
const mainWindow = new BrowserWindow({
  // ...
  show: false,
  backgroundColor: '#2e2c29',
  webPreferences: {
    // ...
    sandbox: false, // 动态路由需关闭沙箱
  }
});

// 添加窗口就绪事件
mainWindow.once('ready-to-show', () => {
  mainWindow.show();
});

// 路由文件修改
const router = createRouter({
  history: createWebHashHistory(process.env.NODE_ENV === 'production' ? './' : '/'),
  // ...
})

---

验证方式

1. 打包后运行应用，观察动态路由页面是否正常渲染。
2. 检查设置页面打开时是否仍有白屏（应被背景色覆盖）。
3. 通过视频中的操作路径复测问题是否解决。

若仍存在问题，请检查 Vue Devtools 是否有报错（开发环境通过 mainWindow.webContents.openDevTools() 开启）。