电子打包器以一种奇怪的白色边缘呈现不同的css。如何调试并修复此问题？

Question

我的电子打包器以非常奇怪的方式呈现css。在包应用程序中，实际应用程序周围有一个奇怪的白色边距，内容窗口只有50％的空间：

在早期版本中，这曾经起作用，所以我不确定哪个更改导致了这个。为了比较，这是应用程序在开发模式下的样子：

我该如何修复和调试？我试图整合来自https://github.com/sindresorhus/electron-debug的电子调试，以便在打包的应用程序中使用chrome dev工具，但似乎我对它的集成做了一些错误？

    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>

Answer 1

经过几个小时的困惑，我解决了它。我的#wrapper设置是使用锅炉板登陆页面中的#wrapper css设置编写的。

出于某种原因，这些在构建期间应用，但在开发期间不应用。

添加＆＃34;范围＆＃34;到样式标签解决了它

<style scoped>