electron packager 以不同的方式呈现 css，带有奇怪的白色边距..如何调试和修复这个问题？

Question

我的 electron-packager 以一种非常奇怪的方式呈现 css。在应用程序包中，实际应用程序周围有一个奇怪的白边，内容 window 只有 space 应有的 50%：

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

我该如何解决和调试这个问题？我尝试从 https://github.com/sindresorhus/electron-debug 集成 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：我的 techstack 基于此样板 https://github.com/SimulatedGREG/electron-vue I added http://element.eleme.io/#/en-US 用于网格系统和 ui 控件。根据要求 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 设置编写的。

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

在样式标签中添加 "scoped" 解决了问题

<style scoped>

electron packager 以不同的方式呈现 css，带有奇怪的白色边距..如何调试和修复这个问题？

electron packager renders css differently with a weird white margin..how to debug and fix this?

css

electron

electron-packager