复古话题：Vue2 的空格间距切换到 Vite 后消失了

绝大多数 Webpack 项目是基于 Vue 2 的，而 Vite 项目几乎都是 Vue 3。这两个版本对"模板中的空格"处理逻辑（Compiler Options）默认值是不一样的。

这里有三个层面的原因，帮你彻底搞清楚为什么 Vite（Vue 3）看起来把空格"吃掉"了：

1. 根本原因：Vue 编译器的 `whitespace` 选项

Vue 的编译器有一个配置项叫 whitespace，它有两个可选值：

preserve (保留)：原样保留 HTML 中的换行和空格。
condense (压缩) ：把标签之间的多个空格、换行符压缩成一个空格。如果标签之间完全没有字符（只有换行），在某些激进模式下可能会被完全忽略。

默认值的差异：

Vue 2 (Webpack 常见): 默认策略倾向于保留较多的空白，或者早期的 vue-loader 配置比较宽容。
Vue 3 (Vite 标准): 默认值是 condense。Vue 3 为了提升性能和减小包体积，默认采用了更激进的压缩策略。

2. 构建工具的处理：Minification (压缩)

Webpack: 在开发环境（Development）通常不压缩 HTML，所以你写了换行，浏览器里就能看到换行（也就渲染成空格）。
Vite: Vite 在开发环境非常快，但它对模板的处理非常直接。Vue 3 编译器处理完后，多余的空格已经被规范化了。

3. 如何在 Vite 中找回"丢失的空格"？

如果你希望 Vite (Vue 3) 的行为像以前一样，完全保留你代码里的换行和空格，你可以在 vite.config.js 中修改 Vue 插件的配置。

修改 vite.config.js：

javascript 复制代码

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // 将默认的 'condense' 改为 'preserve'
          whitespace: 'preserve' 
        }
      }
    })
  ]
})

做了这个修改后的效果：

HTML 代码：

html 复制代码

<span>按钮1</span>
<span>按钮2</span>

默认 (condense): 渲染结果可能是 按钮1 按钮2 (中间一个空格)，但在某些 flex 布局或者紧凑模式下，可能会感觉间距变小了。
修改后 (preserve): 会严格保留换行符对应的空白，间距感会和老项目保持一致。

总结建议

虽然可以通过 whitespace: 'preserve' 找回空格，但我不建议过度依赖这个配置。

最佳实践 依然是： 不要依赖代码里的"物理换行"来产生视觉间距。