過年之前，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）跟好友聚聚。
當然，有得就有失：老家的小伙伴們，也祝福你們新的一年，家庭事業穩步向前，大吉大利！
生活是具體的，很不起眼的小事，是牽絆掛念，也是勇氣之源。
