how to fix blank page if i am using vue router with electron js?

Question

I'm trying to use vue router with an application on an Electron JS. If I use a router on the render page, then the router work done. But I do not understand how to make the transition to the page, for example,- 'Settings' using the Tray. At attempt of transition the empty page opens. I have prepared a working example of the project. This problem exists only build project. In development mode all work well.

This is my work example on github. Please need help.

git clone https://github.com/DmtryJS/electron-vue-example.git
cd electron-vue-example
npm install
npm run build
and run dist\win-unpacked\example_for_stackoverflow.exe

my main.js file

'use strict'

import { app, protocol, BrowserWindow, Menu, ipcMain, Tray } from 'electron'
import { format as formatUrl } from 'url'
const electron = require('electron');
const path = require('path');

const isDevelopment = process.env.NODE_ENV !== 'production';

let imgBasePath;

if(isDevelopment) {
  imgBasePath = path.join('src','assets', 'img');
} else {
  imgBasePath = path.join(path.dirname(__dirname), 'extraResources', 'img');
}

let win;
let tray;
protocol.registerStandardSchemes(['app'], { secure: true })

const trayIcon = path.join(__static, 'img', 'icon.png');

function createWindow () {
  win = new BrowserWindow({ 
    width: 800, 
    height: 600,
    icon: trayIcon
   })

  routeTo(win, "")

  win.on('closed', () => {
    win = null
  })
   //убрать меню
   win.setMenuBarVisibility(true)

   win.on('show', function() {
   tray.setHighlightMode('always')
   })

   win.on('hide', function() {
     tray.setHighlightMode('never')
   })
}

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (win === null) {
    createWindow()
  }
})

app.on('ready', () => {
  createWindow()
  win.webContents.openDevTools(); //открыть dev tools
  createTray()
})

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', data => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

function createTray()
{
  let traiIconPath = path.join(imgBasePath, 'preloader_tray_icon.png')
  tray = new Tray(traiIconPath)

  const contextMenu = Menu.buildFromTemplate(
    [ 
      {
        label: 'Settings', 
        type: 'normal',

        click: function() 
        {
          routeTo(win, "/settings")
          let contents = win.webContents

          contents.on('dom-ready', function()
          {
            if(!win.isVisible())
            {
              showWindow()
            }
          })   
        }
      },

      {
        label: 'Exit', 
        type: 'normal', 

        click: function() 
        {
          win = null
          app.quit()
        }
      }
    ])

  tray.setContextMenu(contextMenu)

  tray.on('click', function() {
  toggleWindow();
})
}

function showWindow() {
  var position = getPosition();
  win.setPosition(position.x, position.y, false)
  win.show()
  win.focus()
}

ipcMain.on('routerEvent', function(event, arg) {
  routeTo(win, arg)
})

function routeTo(win, to) {
  if (isDevelopment) {
    win.loadURL(`http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}` + to)
  } else {
    win.loadURL(formatUrl({
      pathname: path.join(__dirname, 'index.html' + to);,
      protocol: 'file',
      slashes: true
    }))
  }
}

And router.js

import Vue from 'vue'
import Router from 'vue-router'
import Main from './../views/Main.vue'
import Settings from './../views/Settings.vue'

Vue.use(Router)

export default new Router({
  //mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Main
    },
    {
      path: '/settings',
      name: 'settings',
      component: Settings
    }
  ]
})

Answer 1

You need to add created to the main Vue app check docs

// src/main.js

new Vue({
  router,
  render: h => h(App),
  created() {
    // Prevent blank screen in Electron builds
    this.$router.push('/')
  }
}).$mount('#app')

Answer 2

The solution for me was to remove the history mode in the vue router.

Answer 3

Sorry, but after one day of googling, I just found a solution. The case turned out to be

 win.loadURL(formatUrl({
      pathname: path.join(__dirname, 'index.html' + to);,
      protocol: 'file',
      slashes: true
    }))

I delete formaUrl and everything works well

win.loadURL(path.join(__dirname, 'index.html' + to));