为什么 Vue 忽略 css 规则？

Question

I have the following html code我有以下 html 代码

<head>
    <script src="https://unpkg.com/vue@3"></script>
    <script defer src="script.js"></script>
</head>
<body>
    <div id="main">        
        <div>
            1. This is 1st line

            2. This is 2nd line

            3. This is 3rd line
        </div>
        <br>
        <div style="white-space: pre-line;">
            1. This is 1st line

            2. This is 2nd line

            3. This is 3rd line
        </div>
    </div>
</body>

Which will result in这将导致

1. This is 1st line 2. This is 2nd line 3. This is 3rd line


1. This is 1st line

2. This is 2nd line

3. This is 3rd line

However, when I mount a Vue instance onto my main div, this is the result I get然而，当我将一个 Vue 实例挂载到我的主 div 上时，这就是我得到的结果

1. This is 1st line 2. This is 2nd line 3. This is 3rd line

1. This is 1st line 2. This is 2nd line 3. This is 3rd line

The code for Vue instance in the script.js file is as follow script.js文件中的Vue实例代码如下

const test = Vue.createApp({

}).mount("#main")

Why did my white-space style get ignored completely?为什么我的空白样式被完全忽略了？

Answer 1

The Vue compiler collapses whitespace by default, so the newlines in your original code gets collapsed (extraneous whitespace is removed) to produce more efficient compiled output. Vue 编译器默认折叠空格，因此原始代码中的换行符会折叠（多余的空格被删除）以生成更高效的编译 output。

Option 1: App config to disable whitespace-condense选项 1：应用程序配置以禁用空白压缩

You can disable this globally in your example with app.config.compilerOptions.whitespace set to 'preserve' :您可以在您的示例中全局禁用此功能，并将app.config.compilerOptions.whitespace设置为'preserve' ：

const app = Vue.createApp({})
app.config.compilerOptions.whitespace = 'preserve'
app.mount("#main")

demo 1演示 1

Or disable it per component:或者按组件禁用它：

const app = Vue.createApp({
  compilerOptions: {
    whitespace: 'preserve'
  }
})
app.mount("#main")

demo 2演示 2

Note: app.config.compilerOptions.whitespace is only respected when using the full build.注意： app.config.compilerOptions.whitespace仅在使用完整构建时才受到尊重。 Otherwise, you'd have to set the option through build flags.否则，您必须通过构建标志设置选项。

Option 2: Build flag to disable whitespace-condense选项 2：构建标志以禁用空白压缩

You can configure @vue/compiler-sfc to disable whitespace-condense in this Vite config:你可以在这个 Vite 配置中配置@vue/compiler-sfc来禁用 whitespace-condense：

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

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          whitespace: 'preserve', 👈
        },
      },
    }),
  ],
})

demo 3 演示 3

Option 3: Use `<br>` where new-line is needed选项 3：在需要换行的地方使用`<br>`

Alternatively, you could explicitly add <br> tags where needed, which would keep the originally intended optimization while implementing the desired spacing:或者，您可以在需要的地方显式添加<br>标签，这将在实现所需间距的同时保持最初预期的优化：

<div>
  1. This is 1st line<br>

  2. This is 2nd line<br>

  3. This is 3rd line<br>
</div>

为什么 Vue 忽略 css 规则？

问题描述

1 个解决方案

解决方案1
2 2022-05-19 01:48:10

Option 1: App config to disable whitespace-condense选项 1：应用程序配置以禁用空白压缩

Option 2: Build flag to disable whitespace-condense选项 2：构建标志以禁用空白压缩

Option 3: Use `<br>` where new-line is needed选项 3：在需要换行的地方使用`<br>`

为什么 Vue 忽略 css 规则？

问题描述

1 个解决方案

解决方案1 2 2022-05-19 01:48:10

Option 1: App config to disable whitespace-condense选项 1：应用程序配置以禁用空白压缩

Option 2: Build flag to disable whitespace-condense选项 2：构建标志以禁用空白压缩

Option 3: Use <br> where new-line is needed选项 3：在需要换行的地方使用<br>

解决方案1
2 2022-05-19 01:48:10

Option 3: Use `<br>` where new-line is needed选项 3：在需要换行的地方使用`<br>`