vue electron builder blank page

Question

How I came to the problem:
I setup an project like this: https://www.smashingmagazine.com/2020/07/desktop-apps-electron-vue-javascript/ until it came up to the coding part, there I added custom stuff. Created Components and so on. Everything works fine in serve then I want to build it.

What I expect as outcome:
App working as in serve mode

What I got:
blank page

What I've tried to fix the problem:
change a wide range of path urls like:

 win.loadURL(url.format({
            pathname: path.join(__dirname, '../public/index.html'),
            protocol: 'file:',
            slashes: true
})) // with different links passing different index.html files (raw vue build, electron build and public)

win.loadURL('app://./index.html')

win.loadURL(`file://${__dirname}/../public/index.html`) // aswell as the variation without file protocoll

Problem is I dont get errors. If I open developer console at the end of the building process by the menu bar it says, that I have to reload the page that the console is attached to the program, when I press reload, nothing happens.

Any suggestions to go further?

edit: here are my dependecies:

 "dependencies": {
    "axios": "^0.20.0",
    "core-js": "^3.6.5",
    "jquery": "^3.5.1",
    "vue": "^3.0.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "babel-eslint": "^10.1.0",
    "electron": "^9.0.0",
    "electron-devtools-installer": "^3.1.0",
    "electron-icon-builder": "^1.0.2",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^7.0.0-0",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.4",
    "webpack-cli": "^4.0.0"
  },

user_11764752 · Answer

So after many hours of struggling because I couldnt open a working console I found a tool called Debugtron. After a bit of optimization it throwed the error:" createProtocol is undefined ".

The autogenerated background.js missed the line:

import createProtocol from "vue-cli-plugin-electron-builder/lib/createProtocol";

vue electron builder blank page

1 Answers