fix一个陪伴我过年的issue

过年之前，debug一个Web页面，发现怎么弄都是效果不好，组件之间零间距，这太...太亲密了。
效果如下：

组件之间无距离

查看样式，果然如此：

Box边框

由于对于样式的问题，不太懂。就恶补查阅资料，一点点啃。
期间也顺带学习了CSS课程，补课过程中，发现其中提到了关键一句：

内联元素之间是有一个间距问题。

上面没说答案，经过调查，发现如果加入空格或者换行是可以恢复这个内联样式的默认间距的。

手动调整样式

在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。

到此为止，页面显示问题的原因定位到了，那怎么解决呢？
终于知道改怎么对这个问题进行提问了，更贴切的描述应该为：display: inline-block 布局时, 间距为何会消失？

由于本页面是用Vue CLI3脚手架生成的，所以开始我想着通过vue loader下css loader入手分析。翻来覆去好几天，开始想着是版本上的差异，试来试去，没有章法，也没有结果。

实在是不明白，顺便也熟悉了一下webpack的打包原理。时间啊，又过去几天了。github上很多都是Vue CLI2的源码，一堆webpack.conf.js的配置文件。由于VueCLI3的配置方式改变挺大的，所以都没有办法找到相对直接一些的答案。

但是有一点在研究过程中是肯定的，可以肯定是webpack的loader过程中出的问题。自动调整的格式不对。从网上找了一个VueCLI2的项目编译了一下，分析一下webpack打包的结果：

关键空格

在webpack build结果chunck-*.js文件中，手动加入t.v(" ")，执行一把命令测试一下：

serve -s dist

果然就好了。

那具体在vue.config.js中怎样配置？还是先求助官方文档，继续查阅资料：

如果 Vue CLI 提供的内建没有满足你的需求，或者你乐于从零开始创建你自己的 webpack 配置，那么请继续阅读这篇指南：https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE

在章节“服务端渲染的依赖排除”中找到了如下关键信息：

compilerOptions

进一步查看其中细节：

preserveWhitespace
默认为 true。这意味着编译好的渲染函数会保留所有 HTML 标签之间的空格。如果设置为 false，则标签之间的空格会被忽略。这能够略微提升一点性能但是可能会影响到内联元素的布局。

文档上写的默认是true，也就是说标签之间的空格不会被忽略？！！！

还是不甘心，既然已经查到这里了，debug一下不费劲，再手动设置一下试试：

// vue.config.js
module.exports = {
//...
  // 如果你不需要生产环境的 source map，可以将其设置为 false 以加速生产环境构建。
  productionSourceMap: false,
//...
  configureWebpack: {
//...
  chainWebpack: config => {
//...
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        // modify the options...
        options.compilerOptions.preserveWhitespace = true
        return options
      })
//...
  }
}

奇迹出现了，之前难看的布局fix了。

按钮、表格内容Tag布局终于OK

此刻只想找个角落一个人静静。。。话说上午，还在想要不要代码全部回退，老老实实地配置webpack.conf.js，一个个loader一个个配置。期间一度感觉山穷水尽了。

所以，过年期间也在抓紧这个事情之余，也顺便完成了如下几件事情：
1）陪伴爷爷过年在西安转转。
2）仰首是春，俯首是秋，牵挂中，亲情更暖。
3）祝愿孩子健康快乐成长。
4）拜年：长辈有恩，无以为报。
5）跟好友聚聚。

当然，有得就有失：老家的小伙伴们，也祝福你们新的一年，家庭事业稳步向前，大吉大利！

生活是具体的，很不起眼的小事，是牵绊挂念，也是勇气之源。

fix一个陪伴我过年的issue

推荐阅读更多精彩内容