Vue: Electron打包Vue项目后，首界面空白(electron:serve正常，electron:build异常)

Vue: Electron打包Vue项目后，首界面空白

这个问题呢，是在开发到最后，准备 push 项目到 github 时出现的问题。

当我用 npm run electron:build 打包项目后，再次安装打开项目，发现首页空白。

更奇怪的现象是，当我 使用 npm run electron:serve 时，

界面却可以正常显示，并且一切正常！

此时，回头查看了一下项目的路由 router ，可能影响到Electron打包的几个路由，都在这里：

我将 path: * 如下图所示，取消注释后，npm run electron:serve 后，项目依旧一切正常；

然而，当我使用 npm run electron:build 打包项目后， 更加让人困惑的现象发生了，首页 居然显示为path: * 不匹配任何路径跳转后的 404 界面。

此时的我，表示，非常困惑(very confusing)。

此时开始自我检讨，没有好好了解electron以及vue的运行原理。
又开始狂补知识，什么 electron 分主进程、渲染进程 之类的！

然而，并没有什么luan用🤨，直到在 官网；

发现这样一条 Common Issues，
原来 blank screen on builds，but works fine on serve 的原因在这里：

Electron 只在 路由模式 为 hash 时，才可以正常运行。否则，就会无法找到匹配的路径，故而选择 path: * 对应的路由；

如果你的 router 文件中，设置了 path: * ，那么 首页，就是path: * 对应的界面，比如刚才的首页弹出 404 ；而如果没有设置 path: * ，那么，就不出现首页blank！

故而，在 router 中修改了下，

然后再次，npm run electron:build，成功！

各位看官，如果对vue+electron开发有兴趣，可以star、fork 我的 github项目: MD5-Encryption 🦝

下面列几条可能会对你有用的传送门：

References

[1]、https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/commonIssues.html#blank-screen-on-builds-but-works-fine-on-serve

[2]、https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96