Vue CLI Plugin Electron Builder
lastmod 2022-04-07created 2022-04-074 edits
It is different from electron-vue! From electron-vue!
Runs an already-built vue project as a Background Process and uses electron only as a web-view.
Installation
This is easy to confuse: electron-vue uses npm for installation, but this project uses vue-cli.
| WARNING |
| If you use vue-router, you must use hash mode. See #Blank screen on builds, but works fine on serve. |
Troubleshooting
Blank screen on builds, but works fine on serve
This issue is likely caused when Vue Router is operating in history mode. In Electron, it only works in hash mode. To fix this, edit your src/router.(js|ts):
If using Vue 2:
export default new Router({
- mode: 'history',
+ mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})
If using Vue 3:
const router = createRouter({
- history: createWebHistory(),
// (you will need to import these functions from 'vue-router')
+ history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(),
})
This will have the router operate in hash mode in Electron builds, but won't affect web builds.