Electron-VUE项目编译后打开页面空白的问题

Electron项目开发时如果使用vue则需要将vue路由模式该为createWebHashHistory模式以方便本地文件形式加载页面，如果使用createWebHistory则需要以加载远程网页URL形式加载页面，也就是需要将vue项目部署到服务器上通过http://ip:port/来加载。通常情况下electron项目都以加载本地文件形式运行，也就是浏览器可以直接渲染的本地文件html，而不需要提前将网页部署到服务器。
如果使用其他框架如angular、react，可能也存在同样问题

以下三个模式中，如果在网页开发中通常使用createWebHistory模式，但是electron开发我们需要加载本地html，则使用createWebHashHistory模式，同时vue项目编译时在vue.config.js中配置把路径该为相对路径，否则也会导致页面空白无法加载

module.exports = ({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production'? './': '/',//编译出来的文件使用相对路径可直接浏览器打开渲染，否则需要放在一个http服务器中解析
  outputDir:"dist",//打包输出目录
  assetsDir:"static"//静态资源存放目录

})

vue中提供的三种路由模式

createWebHashHistory模式

hash 模式是用 createWebHashHistory() 创建的：

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

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    //...
  ],
})

它在内部传递的实际 URL 之前使用了一个哈希字符（#）。由于这部分 URL 从未被发送到服务器，所以它不需要在服务器层面上进行任何特殊处理。不过，它在 SEO 中确实有不好的影响。如果你担心这个问题，可以使用 HTML5 模式。

createWebHistory模式

用 createWebHistory() 创建 HTML5 模式，推荐使用这个模式：

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    //...
  ],
})

当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id。漂亮!

不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id，就会得到一个 404 错误。这就尴尬了。

不用担心：要解决这个问题，你需要做的就是在你的服务器上添加一个简单的回退路由。如果 URL 不匹配任何静态资源，它应提供与你的应用程序中的 index.html 相同的页面。漂亮依旧!

createMemoryHistory

Memory 模式不会假定自己处于浏览器环境，因此不会与 URL 交互也不会自动触发初始导航。这使得它非常适合 Node 环境和 SSR。它是用 createMemoryHistory() 创建的，并且需要你在调用 app.use(router) 之后手动 push 到初始导航。

import { createRouter, createMemoryHistory } from 'vue-router'
const router = createRouter({
  history: createMemoryHistory(),
  routes: [
    //...
  ],
})