Vue 2.7模板多余空格问题：如何兼顾可读性与正确渲染？

针对Vue 2.7和Vue 3跨版本的模板空格渲染差异，以下几种方法可以兼顾代码可读性和正确渲染：

1. 使用插值空格修剪语法 #

Vue 2和3都支持在插值表达式中用-修剪前后空格，写法为{{- 表达式 -}}。这样即使模板有缩进换行，插值前后的多余空格会被自动移除，同时代码保持清晰的层级结构：

<span>
  {{- text -}}
  <span>
    {{- anotherText -}}
  </span>
</span>

渲染结果会是预期的<span>text<span>anotherText</span></span>，既保留了代码的缩进可读性，又消除了多余空格。

2. 用模板注释消除换行空格 #

在换行和缩进的位置添加空注释，编译器会忽略注释内容，同时吃掉注释前后的空格，不影响代码的缩进格式：

<span><!--
  -->{{ text }}<!--
  --><span><!--
    -->{{ anotherText }}<!--
  --></span><!--
--></span>

这种方法完全兼容Vue 2和3，代码结构清晰，只是需要额外添加注释，适合需要精确控制空格的场景。

3. 全局配置Vue 2编译器的空格处理 #

如果希望Vue 2的空格行为和Vue 3对齐，可以在Vite配置中修改Vue 2编译器的preserveWhitespace选项，全局关闭多余空格的保留：

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue2'

export default defineConfig({
  plugins: [
    vue({
      compilerOptions: {
        preserveWhitespace: false
      }
    })
  ]
})

开启后，Vue 2会自动移除模板中多余的空格，和Vue 3的渲染结果一致，无需修改模板代码，适合全局统一要求无多余空格的项目。

内容的提问来源于stack exchange，提问作者Alexey