Я создаю приложение electronic-vue с несколькими окнами, я использую vue-router.
Приложение работает хорошо при запуске из терминала Visual Studio Code (в режиме dev), но после сборки его для производстваУ меня белый экран.
Вот мой код
public / index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>EmaFlow Work Sessiong Tracker</title>
</head>
<body>
<noscript>
<strong>We're sorry but statement-ts doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app" class="h-100"></div>
<!-- built files will be auto injected -->
</body>
</html>
src / App.vue
<template>
<div id="app" class="h-100">
<router-view />
</div>
</template>
src / router.ts
import Vue from 'vue';
import Router from 'vue-router';
import LoginWindow from '@/views/LoginWindow.vue';
import MainWindow from '@/views/MainWindow.vue';
Vue.use(Router);
export default new Router({
routes: [
{
path: '/',
name: 'login',
component: LoginWindow,
},
{
path: '/main',
name: 'main',
component: MainWindow,
},
],
});
src / main.ts
import Vue from 'vue';
import VeeValidate from 'vee-validate';
import VueTimers from 'vue-timers'
import App from './App.vue';
import router from './router';
Vue.use(VeeValidate);
Vue.use(VueTimers)
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App),
}).$mount('#app');
import $ from 'jquery'
import 'bootstrap/dist/css/bootstrap.min.css'
import 'bootstrap/dist/js/bootstrap.bundle.min.js'
import '@fortawesome/fontawesome-free/js/all.min.js';
src / background.ts
'use strict'
import { app, protocol, BrowserWindow, ipcMain, Event } from 'electron'
import {
createProtocol,
installVueDevtools
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }])
const appWindows: BrowserWindow[] = [];
function createWindow(slug: string, options?: object) {
const defaultOptions = {
width: 800,
height: 600,
frame: false,
webPreferences: {
nodeIntegration: true,
},
};
const windowOptions = Object.assign({}, defaultOptions, options);
const window = new BrowserWindow(windowOptions);
appWindows.push(window);
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
window.loadURL(process.env.WEBPACK_DEV_SERVER_URL as string + '/#' + slug);
window.webContents.openDevTools();
} else {
createProtocol('app')
// Load the index.html when not in development
window.loadURL('app://./index.html' + '/#' + slug);
}
window.on('closed', () => {
appWindows.splice(appWindows.indexOf(window), 1);
});
}
function createLoginWindow() {
createWindow('/', {
width: 400,
height: 300,
resizable: isDevelopment,
});
}
// 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 installVueDevtools();
} catch (e) {
// console.error('Vue Devtools failed to install:', e.toString());
}
}
createLoginWindow();
});
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 (appWindows.length === 0) {
createLoginWindow();
}
})
// 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()
}
})
ipcMain.on('open-window', (e: Event, arg: WindowParams) => {
createWindow(arg.route, arg.options);
});
// 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()
})
}
}
package.json
{
"name": "emaflow-worksession-tracker",
"version": "0.1.0",
"private": true,
"scripts": {
"lint": "vue-cli-service lint",
"build": "vue-cli-service electron:build",
"serve": "vue-cli-service electron:serve",
"postinstall": "electron-builder install-app-deps",
"postuninstall": "electron-builder install-app-deps"
},
"main": "background.js",
"dependencies": {
"axios": "^0.19.0",
"bootstrap": "^4.3.1",
"core-js": "^2.6.10",
"howler": "^2.1.2",
"jquery": "^3.4.1",
"popper.js": "^1.15.0",
"typescript": "^3.6.4",
"vee-validate": "^2.2.15",
"vue": "^2.6.10",
"vue-class-component": "^7.0.2",
"vue-property-decorator": "^8.2.2",
"vue-router": "^3.1.3",
"vue-timers": "^2.0.4"
},
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.11.2",
"@vue/cli-plugin-babel": "^3.12.0",
"@vue/cli-plugin-typescript": "^3.12.0",
"@vue/cli-service": "^3.12.0",
"electron": "^5.0.11",
"stylus": "^0.54.7",
"stylus-loader": "^3.0.2",
"vue-cli-plugin-electron-builder": "^1.4.0",
"vue-template-compiler": "^2.6.10"
}
}
При запуске приложения будет показано окно входа в систему, при успешном входе в систему окно входа закроется и откроется другое окно.
Чтобы открыть окно, в background.ts я создал функцию createWindow, который принимает путь к маршрутизатору в качестве первого параметра. Например, чтобы создать окно входа в систему, я звоню createWindow('/', options) и для создания главного окна приложения после успешного входа в систему я пишу createWindow('/main', options).
Я думаю, что моя проблема в window.loadUrl внутри createWindow в background.ts, но я не уверен, какой правильный URL должен быть для производственного режима.
пожалуйста, сообщите и спасибо заранее.