过年之前，debug一个Web页面，发现怎么弄都是效果不好，组件之间零间距，这太...太亲密了。
效果如下：
查看样式，果然如此：
由于对于样式的问题，不太懂。就恶补查阅资料，一点点啃。
期间也顺带学习了
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中怎样配置？还是先求助官方文档，继续查阅资料：
- https://cli.vuejs.org/zh/config/#devserver-proxy
- https://cli.vuejs.org/zh/guide/webpack.html#%E4%BF%AE%E6%94%B9-loader-%E9%80%89%E9%A1%B9
如果 Vue CLI 提供的内建没有满足你的需求，或者你乐于从零开始创建你自己的 webpack 配置，那么请继续阅读这篇指南：https://vue-loader.vuejs.org/zh/guide/#%E6%89%8B%E5%8A%A8%E8%AE%BE%E7%BD%AE
在章节“服务端渲染的依赖排除”中找到了如下关键信息：
进一步查看其中细节：
- 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了。
此刻只想找个角落一个人静静。。。话说上午，还在想要不要代码全部回退，老老实实地配置webpack.conf.js，一个个loader一个个配置。期间一度感觉山穷水尽了。
所以，过年期间也在抓紧这个事情之余，也顺便完成了如下几件事情：
1）陪伴爷爷过年在西安转转。
2）仰首是春，俯首是秋，牵挂中，亲情更暖。
3）祝愿孩子健康快乐成长。
4）拜年：长辈有恩，无以为报。
5）跟好友聚聚。
当然，有得就有失：老家的小伙伴们，也祝福你们新的一年，家庭事业稳步向前，大吉大利！
生活是具体的，很不起眼的小事，是牵绊挂念，也是勇气之源。
