Vue CLI Plugin Electron Builder
electron-vue와는 다르다! electron-vue와는!
이미 구축된 vue 프로젝트를 Background Process 로 기동한 후 electron을 web-view 로만 사용한다.
Installation
혼동하기 쉽지만 electron-vue는 설치할 때 npm을 사용하지만, 이 프로젝트는 vue-cli를 사용한다.
WARNING |
만약 vue-router를 사용한다면 해시-모드를 사용해야 한다. #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.