Настройки

transformAssetUrls

  • Тип: { [tag: string]: string | Array<string> }

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

    {
      video: ['src', 'poster'],
      source: 'src',
      img: 'src',
      image: 'xlink:href'
    }
    

    Во время компиляции шаблона, компилятор может преобразовывать определённые атрибуты, такие как URL-адреса в src, в вызовы require, чтобы указанный ресурс обрабатывался с помощью webpack. Например, <img src="./foo.png"> будет пытаться найти файл ./foo.png в вашей файловой системе и добавит его как зависимость сборки.

compiler

  • Тип: VueTemplateCompiler

  • По умолчанию: require('vue-template-compiler')

    Переопределение компилятора по умолчанию, используемого для компиляции секций <template> в однофайловых компонентах.

compilerOptions

  • Тип: Object

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

    Настройки для компилятора шаблонов. При использовании по умолчанию vue-template-compiler вы можете использовать эту опцию чтобы добавить пользовательские директивы компилятора, модули, или с помощью { preserveWhitespace: false } игнорировать пробелы между тегами.

    Подробнее в перечне опций vue-template-compiler.

transpileOptions

  • Тип: Object

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

    Опции транспиляции ES2015+ в ES5 для генерируемого кода render-функций. Транспилятор — форк Buble, поэтому полный список опций вы можете посмотреть здесь.

    Компиляция render-функций шаблонов поддерживает специальную трансформацию stripWith (включена по умолчанию), которая удаляет использование with в сгенерированных render-функциях, чтобы сделать их совместимыми со strict-режимом.

optimizeSSR

  • Тип: boolean

  • По умолчанию: true когда конфигурация webpack имеет свойство target: 'node' и версия vue-template-compiler 2.4.0 или выше.

    Включает оптимизацию для серверного рендеринга в Vue 2.4, которая компилирует в простые строки часть деревьев vdom, возвращаемых render-функциями, что улучшает производительность серверного рендеринга. В некоторых случаях вам может потребоваться явно отключить оптимизацию, поскольку результирующие render-функции могут быть использованы только для серверного рендеринга и не могут использоваться для рендеринга на стороне клиента или тестирования.

hotReload

  • Тип: boolean

  • По умолчанию: true в режиме разработки, false в режиме production или при установленной опции target: 'node' в конфигурации webpack.

  • Разрешённые значения: false (true не заставит работать горячую перезагрузку ни в режиме production, ни когда target: 'node')

    Возможность webpack по горячей перезагрузке модулей позволяет применять изменения в браузере без необходимости обновления страницы. Используйте эту опцию (со значением false) чтобы отключить горячую перезагрузку в режиме разработки.

productionMode

  • Тип: boolean
  • По умолчанию: process.env.NODE_ENV === 'production'

Позволяет принудительно включить режим production, который исключит из сборки код, необходимый только на этапе разработки (например, горячую перезагрузку модулей).

shadowMode

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

Компилирует компонент для использования внутри Shadow DOM. В этом режиме стили компонента внедряются в this.$root.$options.shadowRoot вместо head-тега документа.

cacheDirectory / cacheIdentifier

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

Когда указаны оба параметра, включает кэширование в файловой системе скомпилированных шаблонов (требуется, чтобы cache-loader был установлен в том же проекте).

СОВЕТ

Взаимодействие между vue-loader и cache-loader использует инлайновый синтаксис импорта загрузчиков внутри, где символ ! будет рассматриваться как разделитель между различными загрузчиками. Поэтому убедитесь, что cacheDirectory не содержит символов !.