使用VueJS构建项目时Div高度异常增大问题求助

这种构建后样式突然“变形”的问题真的磨人，折腾3小时肯定够闹心的！结合你说的情况，既然已经锁定是CSS相关的Div高度问题，给你几个针对性的排查方向，试试能不能搞定：

• 先排查CSS压缩的锅
  Vue生产构建默认会开启CSS压缩和Tree Shaking，有时候网格布局的关键样式可能被误判成无用代码删掉了。你可以临时修改vue.config.js（Vue CLI项目的话），关掉CSS压缩试试：

  module.exports = {
    css: {
      minimize: false // 临时关闭压缩
    }
  }
  

  重新构建后如果高度恢复正常，那就是压缩规则搞的鬼，给你的网格关键样式加个/*! 注释内容 */的标记，告诉压缩工具这个样式不能被删除。

• 盯紧网格布局的高度约束逻辑
  看看你的网格列容器CSS，是不是用了height: 100%这种依赖父元素高度的属性？开发环境下父元素可能有默认高度，但构建后样式合并或者全局样式被覆盖，父元素高度丢失，子元素就会疯长。试试给网格容器明确添加高度约束：

  .your-grid-column-class {
    height: auto;
    max-height: 600px; /* 按你的预期效果调整数值 */
    overflow: auto; /* 防止内容溢出撑高容器 */
  }
  

• 对比开发/生产环境的样式差异
  用浏览器开发者工具对比两种环境下的元素样式：

  1. 开发模式下打开页面，找到出问题的Div，复制它的计算样式
  2. 打开构建后的生产页面，同样找到该Div的计算样式
  3. 对比两者的height、min-height、grid-template-rows、align-items这些和高度相关的属性，肯定能揪出哪个属性在构建后发生了变化

• 排查第三方UI库的样式冲突
  如果用了Element UI、Bootstrap这类第三方UI库，生产构建时可能因为样式优先级问题，库的默认样式覆盖了你自定义的网格样式。试试给你的网格样式提升优先级：

  .app-wrapper .your-grid-column-class {
    height: 100%; /* 通过嵌套父类选择器提升优先级 */
  }
  

  也可以临时用!important快速验证是不是优先级问题（尽量少用，但能帮你快速定位）

• 检查scoped样式的穿透问题
  如果组件用了scoped样式，构建时Vue会给样式添加哈希后缀，但动态生成的网格元素可能没被正确添加哈希，导致自定义样式不生效，反而继承了全局的异常高度样式。试试把网格关键样式移到全局样式文件，或者用::v-deep穿透scoped：

  ::v-deep .your-grid-column-class {
    height: 100%;
  }
  

要是这些步骤都没解决问题，把你的网格模板代码和对应的CSS贴出来，大家能更精准地帮你定位问题！

内容的提问来源于stack exchange，提问作者noudadrichem