Vue3 compilerOptions 属性

Vue3 选项式 API

在 Vue 3 中，compilerOptions 是一个对象，用于配置 Vue 的模板编译器。

模板编译器负责将 Vue 的模板语法（如 v-bind、v-if 等）转换为 JavaScript 代码。通过 compilerOptions，开发者可以控制编译器的行为，例如如何处理空格、是否保留注释、是否启用特定的优化等。

常见的 compilerOptions 配置

1. whitespace

用途：控制如何处理模板中的空格。

可选值：

• 'preserve'：保留所有空格。
• 'condense'：压缩多余的空格。
• 'collapse'：删除所有不必要的空格。

2. comments

用途：控制是否保留模板中的注释。

可选值：

• true：保留注释。
• false：删除注释。

实例

const app = createApp(App, {
  compilerOptions: {
    comments: false
  }
});


3. delimiters

用途：自定义模板中的插值符号。默认情况下，Vue 使用 {{ }} 作为插值符号。

实例

const app = createApp(App, {
  compilerOptions: {
    delimiters: ['${', '}']
  }
});


结果：在模板中，你可以使用 ${ expression } 而不是 {{ expression }}。

4. isCustomElement

用途：指定哪些标签应被视为自定义元素，而不是 Vue 组件。

实例

const app = createApp(App, {
  compilerOptions: {
    isCustomElement: tag => tag.startsWith('my-')
  }
});


结果：所有以 my- 开头的标签将被视为自定义元素。

---

如何使用 compilerOptions？

compilerOptions 通常在创建 Vue 应用时通过 createApp 方法的第二个参数进行配置。以下是一个完整的示例：

实例

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App, {
  compilerOptions: {
    whitespace: 'condense',
    comments: false,
    delimiters: ['${', '}'],
    isCustomElement: tag => tag.startsWith('my-')
  }
});

app.mount('#app');


---

Vue3 选项式 API

返回顶部