Свойство compilerOptions в Vue3

Vue3 选项式 APIVue3 Options API

В Vue 3,compilerOptionsпредставляет собой объект, используемый для настройки компилятора шаблонов Vue.

Компилятор шаблонов отвечает за преобразование синтаксиса шаблонов Vue (например,v-bind、v-ifи т. д.) в код JavaScript. С помощьюcompilerOptionsразработчики могут управлять поведением компилятора, например тем, как обрабатывать пробельные символы, сохранять ли комментарии, включать ли определённые оптимизации, и так далее.

Распространённые конфигурации compilerOptions

1. whitespace

Назначение: управляет обработкой пробельных символов в шаблонах.

Возможные значения：

  • 'preserve': Сохранять все пробельные символы.
  • 'condense': Сжимать лишние пробельные символы.
  • 'collapse': Удалять все ненужные пробельные символы.

Пример

const app = createApp(App, {
  compilerOptions: {
    whitespace: 'condense'
  }
});

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 选项式 APIVue3 Options API

    Другие расширения