Changed history mode but Blank screen on electron build
See original GitHub issueBlank 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
Output when build
Environment (please complete the following information):
- vue info
Issue Analytics
- State:
- Created 3 years ago
- Comments:15 (1 by maintainers)
Top 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 >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
.babelrc
{ “presets”: [ [“@vue/app”, { “decoratorsLegacy”: true }] ], “plugins”: [ [“@babel/plugin-transform-runtime”] ] }
@mage1k99 Yes