vue+electron 打包后白屏问题

[yubaoquan]

原因

因为使用了 vue-router

原理

打包后的app启动后, electron不会自动跳转到 /, 而且路由模式不能使用history
可以在 App.vue 里写死一段东西, 如果能渲染出来, 大概率就是路由问题导致的白屏

解决方案

需要给成hash模式, 而且需要在loadfile的时候指定一下加载的路由

主进程代码:

    mainWindow.loadFile(join(__dirname, '../renderer/index.html'), { hash: '' });

路由代码:

import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    // youre routes
  ],
});

export default router;

参考资料

vue-router 或 react-router-dom 开发模式正常，但在构建后无效