Свойство app.config.compilerOptions в Vue3

Глобальный API Vue3

app.config.compilerOptionsЭто важная опция конфигурации, которая позволяет разработчикам тонко управлять поведением компиляции приложений Vue.

app.config.compilerOptionsявляется объектом, используемым для настройки поведения компилятора в Vue 3. Он принадлежит экземпляру приложения Vue (app) объекта конфигурации (config), специально используемый для управления поведением при компиляции шаблонов. Устанавливая эти параметры, разработчики могут настраивать поведение компилятора Vue в соответствии с конкретными потребностями.

Общие параметры конфигурации

Ниже приведеныapp.config.compilerOptionsнекоторые часто используемые параметры конфигурации в:

1. isCustomElement

• Назначение: Используется, чтобы указать, какие элементы следует рассматривать как пользовательские элементы (а не компоненты Vue).
• Сценарий применения: Когда вы используете сторонние пользовательские элементы (например, Web Components) в своём шаблоне, их нужно пометить как пользовательские элементы, чтобы компилятор Vue не рассматривал их как неизвестные компоненты Vue.
• Пример：

  Пример

  app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('my-');
  
  Приведённый выше код будет рассматривать все теги, начинающиеся сmy-как пользовательские элементы.

2. whitespace

• Назначение: Управляет обработкой пробельных символов в шаблонах.
• Необязательные значения：
  • 'preserve': Сохранять все пробельные символы.
  • 'condense': Сжимать пробельные символы в один пробел.
  • 'collapse': Удалять все избыточные пробельные символы.
• Пример：

  Пример

  app.config.compilerOptions.whitespace = 'condense';
  
  Приведённый выше код сожмёт пробельные символы в шаблоне в один пробел.

3. delimiters

• Назначение: Изменение разделителей интерполяционных выражений в шаблонах.
• Значение по умолчанию：['{{', '}}']
• Применимый сценарий: Когда нужно избежать конфликтов синтаксиса с другими шаблонизаторами (такими как Django или Jinja2), можно изменить разделители интерполяции.
• Пример：

  Пример

  app.config.compilerOptions.delimiters = ['${', '}'];
  
  Приведённый выше код изменит интерполяционные выражения с{{ }}в${ }。

4. comments

• Назначение: Управляет тем, сохраняются ли HTML-комментарии в шаблонах.
• Значение по умолчанию：false(Не сохранять комментарии)
• Пример：

  Пример

  app.config.compilerOptions.comments = true;
  
  Приведённый выше код сохранит HTML-комментарии в шаблоне.

Как использовать app.config.compilerOptions?

Ниже приведён полный пример использования, показывающий, как настроитьapp.config.compilerOptions：

В приведённом выше коде:

• Обрабатывать все теги, начинающиеся сmy-как пользовательские элементы.
• Сжимать пробельные символы в шаблоне в один пробел.
• Изменить разделители выражений интерполяции на${ }。
• Сохранять HTML-комментарии в шаблоне.

Примечания

1. Применяется только к компиляции шаблонов：app.config.compilerOptionsВлияет только на поведение компиляции шаблонов Vue и не влияет на код JavaScript.
2. Изменяйте разделители с осторожностью: При изменении разделителей интерполяционных выражений убедитесь, что нет синтаксического конфликта с другими шаблонизаторами или фреймворками.
3. Совместимость пользовательских элементов: При использованииisCustomElementнеобходимо убедиться, что определение и использование пользовательских элементов совместимы с Vue.

Глобальный API Vue3