[vue.js + electron] electron:serve에서는 보이던 화면이 electron:build하면 안보일 때 해결 방법

해당 문제는 vue-router 사용 시 발생했다.

router 생성 시 mode를 history에서 hash로 수정하여 해결했다.

const router = new VueRouter({
  mode: 'hash',
  base: process.env.BASE_URL,
  routes
})

 

만약 electron으로 build 시에만 hash mode를 사용하고 싶다면 아래처럼 접근할 수 있을 것으로 보인다.

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(),
})

 

참고
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/commonIssues.html#blank-screen-on-builds-but-works-fine-on-serve
https://stackoverflow.com/questions/53990214/how-to-fix-blank-page-if-i-am-using-vue-router-with-electron-js
https://xshine.tistory.com/345