Skip to content

Vue CLI Plugin Electron Builder

electron-vue와는 다르다! electron-vue와는!

이미 구축된 vue 프로젝트를 Background Process 로 기동한 후 electron을 web-view 로만 사용한다.

Installation

혼동하기 쉽지만 electron-vue는 설치할 때 npm을 사용하지만, 이 프로젝트는 vue-cli를 사용한다. 

vue add electron-builder

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.

Favorite site