vuecli4 搭建 页面 空格   换行不显示被压缩

原文地址：https://blog.csdn.net/weixin_47731144/article/details/107612646

最近升级了一个老项目，发现页面样式改变，在模板中无论输入多少个 &nbsp；页面都只显示一个空格。排查了一下原因，发现是在vue2.6版本升级之后页面template中的换行和空格都被过滤了。于是我就去看了一下官方文档

preserveWhitespace

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

本来以为到这就可以结束了，结果发现并没有生效，想了很久也没有想到原因，于是就打印了一下现有的compilerOptions选项

whitespace:'condense'

没见过的属性，凭借多年的查错经验，我第一时间想到了英文原版

whitespace

Type: string
Valid values: 'preserve' | 'condense'
Default: 'preserve'
The default value 'preserve' handles whitespaces as follows:

A whitespace-only text node between element tags is condensed into a single space.
All other whitespaces are preserved as-is.
If set to 'condense':

A whitespace-only text node between element tags is removed if it contains new lines. Otherwise, it is    condensed into a single space.
Consecutive whitespaces inside a non-whitespace-only text node are condensed into a single space.
Using condense mode will result in smaller compiled code size and slightly improved performance. However, it will produce minor visual layout differences compared to plain HTML in certain cases.

推荐小伙伴以后翻资料一定要看看原版的，下面是具体使用，在vue.config文件中加入以下代码段

configureWebpack: {
    chainWebpack(config) {
      // set whitespace
      config.module
        .rule("vue")
        .use("vue-loader")
        .loader("vue-loader")
        .tap(options => {
          options.compilerOptions.whitespace = 'preserve';
          return options;
        })
        .end();
    }
  }

preserve是保留空格与换行，condense是压缩空格与换行，根据项目需要自行选择，顺带提一句vuecli4 新搭的项目默认是压缩的