question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Changed history mode but Blank screen on electron build

See original GitHub issue

Blank screen when the application is build in windows platform although I changed the history mode as per the Instruction Given.

router/index.js


import Vue from "vue"
import VueRouter from "vue-router"
import Home from "../views/Home.vue"
import Billing from "../views/Billing.vue"
import Business_health_report from "../views/Business_health_report.vue"
import Expenses from "../views/Expenses.vue"
import Inventory from "../views/Inventory.vue"
import Payments from "../views/Payments.vue"
import Sales_invoice from "../views/Sales_invoice.vue"

Vue.use(VueRouter)

const routes = [
	{
		path: "/",
		name: "Home",
		component: Home,
	},
	// {
	// 	path: "/about",
	// 	name: "About",
	// 	component: () =>
	// 		import(/* webpackChunkName: "about" */ "../views/About.vue"),
	// },
]

const router = new VueRouter({
	mode: process.env.IS_ELECTRON ? "hash" : "history",
	base: process.env.BASE_URL,
	routes,
})

export default router

background.js


"use strict"

import { app, protocol, BrowserWindow } from "electron"
import { createProtocol } from "vue-cli-plugin-electron-builder/lib/createProtocol"
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer"
const isDevelopment = process.env.NODE_ENV !== "production"

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win

// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
	{ scheme: "app", privileges: { secure: true, standard: true } },
])

function createWindow() {
	// Create the browser window.
	win = new BrowserWindow({
		width: 1265,
		height: 800,
		minWidth: 1265,
		icon: "./src/assets/logo.png",
		webPreferences: {
			// Use pluginOptions.nodeIntegration, leave this alone
			// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
			nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
		},
	})

	if (process.env.WEBPACK_DEV_SERVER_URL) {
		// Load the url of the dev server if in development mode
		win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
	} else {
		createProtocol("app")
		// Load the index.html when not in development
		win.loadURL("app://./index.html/")
	}

	win.on("closed", () => {
		win = null
	})
}

// Quit when all windows are closed.
app.on("window-all-closed", () => {
	// On macOS it is common for applications and their menu bar
	// to stay active until the user quits explicitly with Cmd + Q
	if (process.platform !== "darwin") {
		app.quit()
	}
})

app.on("activate", () => {
	// On macOS it's common to re-create a window in the app when the
	// dock icon is clicked and there are no other windows open.
	if (win === null) {
		createWindow()
	}
})

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", async () => {
	if (isDevelopment && !process.env.IS_TEST) {
		// Install Vue Devtools
		try {
			await installExtension(VUEJS_DEVTOOLS)
		} catch (e) {
			console.error("Vue Devtools failed to install:", e.toString())
		}
	}
	createWindow()
})

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


Screenshots Expected output, when used eletron:serve image

Output when build image

Environment (please complete the following information):

  • vue info image

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:15 (1 by maintainers)

github_iconTop GitHub Comments

4reactions
13196789316commented, Nov 5, 2020

.babelrc

{ “presets”: [ [“@vue/app”, { “decoratorsLegacy”: true }] ], “plugins”: [ [“@babel/plugin-transform-runtime”] ] }

1reaction
13196789316commented, Nov 5, 2020
Read more comments on GitHub >

github_iconTop Results From Across the Web

Common Issues | Vue CLI Plugin Electron Builder
Blank screen on builds, but works fine on serve. This issue is likely caused when Vue Router is operating in history mode. In...
Read more >
Vue CLI Plugin Electron Builder shows complete blank screen ...
I found that solution is to change router mode from "history" to "hash". So in router config set: mode: process.env.IS_ELECTRON ?
Read more >
BrowserWindow | Electron
The BrowserWindow class exposes various ways to modify the look and behavior of your app's windows. For more details, see the Window Customization...
Read more >
Vue CLI Plugin Electron Builder shows complete blank screen ...
... CLI Plugin Electron Builder shows complete blank screen on build-Vue.js. ... I found that solution is to change router mode from "history"...
Read more >
How to fix the Whitescreen After a Static Deployment with ...
A very common thing you might see there in a “white-screen-situation”, is that your app failed to load the JavaScript bundle – and...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found