Question

我不确定这是特定于vue-loader还是Webpack构建中更通用的东西。

如果您有一个加载了Bootstrap 4的简单HTML页面，并添加了两个按钮：

<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>

即使没有边距，它们之间的渲染间隔也会很小：

但是，如果您将相同的按钮添加到最新版本的Vue应用程序中，则按钮之间没有间隙。您可以通过使用默认设置使用vue-cli创建一个项目，安装bootstrap npm软件包，导入它，然后将两个按钮添加到根组件中来轻松地重新创建它。

当我使用Webpack模板而不是vue-cli时并没有发生这种情况，因此我猜测由vue-cli设置的默认Webpack配置是由某种原因引起的。

有人知道我可以对webpack配置进行任何替代以恢复旧行为吗？这将使我不必在所有相邻按钮之间添加边距。

任何关于按钮通常如何精确地在它们之间留有空格的评论，即使没有设置边距，也可能有助于我研究解决方案。

Answer 1

感谢Terry's comment，我意识到这是一个空白问题。

解决方案是覆盖preserveWhitespace的{{1}}编译器选项，该选项默认情况下设置为vue-loader。这是通过在 vue.config.js中添加以下内容来完成的：

false