Vue 3如何保留span标签之间的空白符 解决相邻span空格消失问题

• 方法1：局部插入空格插值（最灵活，无需修改全局配置）
  直接在需要保留空格的标签之间插入{{ ' ' }}即可，该插值输出的是原生普通空格，支持自动换行，宽度和正常空格完全一致，不会被模板编译器移除，适配你的需求：

  <span>foo</span>
  {{ ' ' }}
  <span>bar</span>
  {{ ' ' }}
  baz 
  qux
  

• 方法2：全局修改模板编译的空白处理策略
  如果项目有大量场景需要保留标签间空白，可以修改Vue编译器的whitespace配置，默认值为condense（会合并/移除标签间多余空白），改为preserve即可保留所有原生空白：
  1. Vite项目修改vite.config.js配置：

  import { defineConfig } from 'vite'
  import vue from '@vitejs/plugin-vue'
  
  export default defineConfig({
    plugins: [
      vue({
        template: {
          compilerOptions: {
            whitespace: 'preserve'
          }
        }
      })
    ]
  })
  

  2. Vue CLI项目修改vue.config.js配置：

  module.exports = {
    chainWebpack: config => {
      config.module
        .rule('vue')
        .use('vue-loader')
        .tap(options => {
          options.compilerOptions = {
            ...options.compilerOptions,
            whitespace: 'preserve'
          }
          return options
        })
    }
  }
  

注意：全局修改后要注意部分场景下多余的空白可能会带来布局偏移，比如inline/inline-block元素之间的默认间距，不需要的场景可以自行调整。

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