问题概述

在使用 Electron + Vue 开发时运行（开发环境）

npm run electron-vite dev

时，窗口能够正常显示 Vue 界面，但是运行（生产环境）

npm run build && electron-builder --win

后，窗口中只会出现白屏。

原因

官网中明确提到，Electron 只在路由模式为 hash 时才能正常运行，否则无法匹配路径。

解决方法

首先我们要简单了解一下 Vue 有哪些路由方式：

  • createWebHashHistory：

它创建的是一个哈希模式的路由。在这种模式下，URL 的路径会通过哈希（#）进行标记。例如：http://www.example.com/#/user/id。这种模式的优点是支持所有的浏览器，包括不支持 HTML5 History API 的浏览器。缺点是 URL 中的哈希符号不美观。

  • createWebHistory：

它创建的是一个 HTML5 历史模式的路由。在这种模式下，URL 是正常的 URL，例如：http://www.example.com/user/id。这种模式的优点是 URL 看起来更美观，没有哈希符号。但是，这种模式需要服务器的支持，因为当用户直接访问一个深层次的 URL 的时候，如果服务器没有正确地配置，就会返回 404 错误。

  • createMemoryHistory：

它创建的是一个内存模式的路由，也就是抽象模式。在这种模式下，URL 不会改变，也不会影响到浏览器的历史记录。这种模式主要用于一些不支持 HTML5 History API 的环境，或者是一些特殊需求，比如在 Node.js 中进行服务器端渲染。抽象模式的路由完全由 JavaScript 控制，不依赖于浏览器的 URL 和历史 API。

那么明确之后我们只需要将路由模式改为 hash 即可。 具体示例如下：

import { createRouter, createWebHashHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import LoginOrRegister from '@/views/LoginOrRegister/index.vue'
import Chat from '@/views/ChatView/index.vue'
​
const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: HomeView,
      meta: {
        title: '首页'
      }
    },
    {
      path: '/login',
      name: 'login',
      component: LoginOrRegister,
      meta: {
        title: '登录/注册'
      }
    },
    {
      path: '/chat',
      name: 'Chat',
      component: Chat,
      meta: {
        title: '聊天页面'
      }
    }
  ]
})
​
export default router