# Конфигурация приложения

Каждое приложение Vue предоставляет доступ к объекту config, который содержит настройки конфигурации для этого приложения:

const app = createApp({})

console.log(app.config)
1
2
3

Перед монтированием приложения можно изменять свойства, перечисленные ниже.

# errorHandler

  • Тип: Function

  • По умолчанию: undefined

  • Использование:

app.config.errorHandler = (err, vm, info) => {
  // обработка ошибки
  // `info` — специфическая для Vue информация об ошибке,
  // например, в каком хуке жизненного цикла была найдена ошибка
}
1
2
3
4
5

Добавление обработчика неперехваченных ошибок во время отрисовки компонентов и наблюдателей. Обработчик вызывается с ошибкой и экземпляром приложения.

Сервисы отслеживания ошибок Sentry (opens new window) и Bugsnag (opens new window) предоставляют официальную интеграцию с использованием этой опции.

# warnHandler

  • Тип: Function

  • По умолчанию: undefined

  • Использование:

app.config.warnHandler = function(msg, vm, trace) {
  // `trace` — это трассировка иерархии компонентов
}
1
2
3

Определение пользовательского обработчика для предупреждений Vue во время выполнения. Работает только в режиме разработки и игнорируется в production.

# globalProperties

  • Тип: [key: string]: any

  • По умолчанию: undefined

  • Использование:

app.config.globalProperties.foo = 'bar'

app.component('child-component', {
  mounted() {
    console.log(this.foo) // 'bar'
  }
})
1
2
3
4
5
6
7

Добавление глобального свойства, к которому можно обращаться из любого компонента приложения. В случае конфликта имён, свойства компонента будут иметь приоритет.

Данный подход заменяет расширение Vue.prototype во Vue 2.x:

// Раньше
Vue.prototype.$http = () => {}

// Сейчас
const app = createApp({})
app.config.globalProperties.$http = () => {}
1
2
3
4
5
6

# optionMergeStrategies

  • Тип: { [key: string]: Function }

  • По умолчанию: {}

  • Использование:

const app = createApp({
  mounted() {
    console.log(this.$options.hello)
  }
})

app.config.optionMergeStrategies.hello = (parent, child) => {
  return `Привет, ${child}`
}

app.mixin({
  hello: 'Vue'
})

// 'Привет, Vue'
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Определение пользовательской функции для слияния опций.

Первый аргумент функции слияния — значения опций родительского элемента. Второй аргумент — опции дочернего элемента.

# performance

  • Тип: boolean

  • По умолчанию: false

  • Использование:

Установка в значение true включит в инструментах разработчика браузера отслеживание производительности во время инициализации, компиляции, отрисовки и обновления компонентов. Работает только в режиме разработки в браузерах, поддерживающих API performance.mark (opens new window).

# compilerOptions 3.1.0+

  • Тип: Object

Настройки для конфигурации компилятора. Значения, объявленные в этом объекте, будут передаваться компилятору шаблонов в браузере и повлияют на каждый компонент в приложении. Обратите внимание, также можно переопределять эти параметры для конкретного компонента с помощью опции compilerOptions.

Важно

Данные настройки для конфигурации будут работать только при использовании полной сборки (т.е. сборка vue.js, которая может компилировать шаблоны в браузере). Если есть шаг сборки и используется runtime-only сборка, то настройки компилятора нужно передавать в @vue/compiler-dom через конфигурацию сборщика.

# compilerOptions.isCustomElement

  • Тип: (tag: string) => boolean

  • По умолчанию: undefined

  • Использование:

// любой элемент, начинающийся с 'ion-', будет считаться пользовательским
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')
1
2

Определяет метод распознавания пользовательских элементов, определённых вне Vue (например, использование Web Components API). Если компонент совпадает с условием, то его не нужно регистрировать и Vue не выдаст предупреждения Unknown custom element.

Обратите внимание, что нет требуется указывать HTML и SVG теги — парсер Vue определяет их автоматически.

# compilerOptions.whitespace

  • Тип: 'condense' | 'preserve'

  • По умолчанию: 'condense'

  • Использование:

app.config.compilerOptions.whitespace = 'preserve'
1

По умолчанию Vue удаляет/сокращает пробельные символы между элементами шаблона для получения более эффективного скомпилированного шаблона:

  1. Стартовые / конечные пробельные символы внутри элемента сжимаются в один пробел
  2. Пробелы между элементами, содержащими новые строки, удаляются
  3. Последовательные пробелы в текстовых узлах сжимаются в один пробел

Установка значения в 'preserve' отключит пункты (2) и (3).

# compilerOptions.delimiters

  • Тип: Array<string>

  • По умолчанию: ['{{', '}}']

  • Использование:

// Разделители изменены на стиль строковых шаблонов в ES6
app.config.compilerOptions.delimiters = ['${', '}']
1
2

Устанавливает разделители, используемые для интерполяции в шаблоне.

Обычно применяют, чтобы избежать конфликтов с фреймворками на стороне сервера, которые также могут использовать синтаксис с фигурными скобками.

# compilerOptions.comments

  • Тип: boolean

  • По умолчанию: false

  • Использование:

app.config.compilerOptions.comments = true
1

По умолчанию Vue удаляет HTML-комментарии внутри шаблонов в production. Установив эту опцию в true заставит Vue сохранять комментарии даже в production. Комментарии всегда сохраняются во время разработки.

Эта опция обычно используется, когда Vue используется с другими библиотеками, которые полагаются на HTML-комментарии.

# isCustomElement удалено

Удалено в версии 3.1.0. Вместо неё используйте compilerOptions.isCustomElement.