我的电子打包器以一种非常奇怪的方式呈现 css。在包应用程序中，实际应用程序周围有一个奇怪的白边，内容窗口只有它应该有的 50% 的空间：
在早期版本中，这曾经可以工作，所以我不确定是哪个更改导致了这种情况。为了比较，这是应用程序在开发模式下的样子：
我该如何修复和调试这个？我试图从https://github.com/sindresorhus/electron-debug集成电子调试，以便在打包的应用程序中使用 chrome 开发工具，但似乎我在集成它时做错了什么？
function createWindow () {
/**
* Initial window options
*/
mainWindow = new BrowserWindow({
height: 1080,
useContentSize: true,
width: 1920
})
mainWindow.loadURL(winURL)
mainWindow.on('closed', () => {
mainWindow = null
})
}
require('electron-debug')({showDevTools: true})
app.on('ready', createWindow)
PS：我的技术栈基于这个样板https://github.com/SimulatedGREG/electron-vue我为网格系统和 ui 控件添加了http://element.eleme.io/#/en-US 。根据要求的CSS：
app.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
<style>
/* CSS */
html, body {
height: 100%;
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica;
}
#app {
height: 100%;
margin: 0;
padding: 0;
}
</style>
这是我MainPage.vue在路由器视图中显示的：
<template>
<el-container id="wrapper">
<el-header>Logo Bratum</el-header>
<el-main>
<router-view></router-view>
</el-main>
<el-footer>Program Status, Backend Status</el-footer>
</el-container>
</template>
<style>
.el-container {
height: 100%;
margin: 0;
padding: 0;
}
.el-header, .el-footer {
background-color: #b3c0d1;
color: #333;
text-align: center;
line-height: 60px;
z-index: 4;
padding: 0;
margin: 0;
}
.el-header {
top: 0px;
}
.el-footer {
bottom: 0px;
}
.el-main {
height: 100%;
background-color: #e9eef3;
padding-top: 0;
margin: 0;
}
.hline {
margin-top: 40px;
margin-bottom: 40px;
}
</style>