Vue CLI

Конфигурация

Глобальная конфигурация CLI

Некоторые глобальные настройки для @vue/cli, такие как предпочитаемый менеджер пакетов и ваши локальные пресеты настроек, сохранены в JSON-файле .vuerc в вашем домашнем каталоге. Вы можете использовать любой редактор для изменения этих настроек.

Также можно воспользоваться командой vue config для изучения или изменения глобальной конфигурации CLI.

Целевые браузеры

Подробнее в разделе совместимость с браузерами.

vue.config.js

vue.config.js — опциональный файл конфигурации, которую автоматически загружает @vue/cli-service если находит его в корневом каталоге вашего проекта (рядом с файлом package.json). Вы также можете использовать поле vue в package.json, но, обратите внимание, в таком случае вы будете ограничены только JSON-совместимыми значениями.

Файл должен экспортировать объект с настройками:

// vue.config.js
module.exports = {
  // настройки...
}

baseUrl

Устаревшая опция, начиная с версии Vue CLI 3.3, используйте вместо неё publicPath.

publicPath

  • Тип: string

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

    Базовый URL-адрес сборки вашего приложения, по которому оно будет опубликовано (именуемая как baseUrl до версии Vue CLI 3.3). Это аналог опции webpack output.publicPath, но Vue CLI также использует это значение в других целях, поэтому вы должны всегда использовать publicPath вместо изменения опции output.publicPath.

    По умолчанию Vue CLI считает, что публикация будет выполнена в корень домена, например https://www.my-app.com/. Если приложение публикуется в подкаталог, то необходимо указать этот путь с помощью этой опции. Например, если приложение будет публиковаться по адресу https://www.foobar.com/my-app/, установите publicPath в значение '/my-app/'.

    Значение также может быть пустой строкой ('') или относительным путём (./), чтобы все ресурсы подключались через относительные пути. Это позволит публиковать сборку в любой публичный каталог, или использовать в окружении файловой системы, например в гибридном приложении Cordova.

    Ограничения относительного publicPath

    Относительный publicPath имеет некоторые ограничения и его следует избегать если:

    • Вы используете маршрутизацию HTML5 history.pushState;

    • Вы используете опцию pages для создания многостраничного приложения (MPA).

    Опция может быть полезна и на этапе разработки. Если вы хотите запускать сервер разработки из корня сайта, то можно устанавливать значение по условию:

    module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

outputDir

  • Тип: string

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

    Каталог, в котором при запуске vue-cli-service build будут создаваться файлы сборки для production. Обратите внимание, что этот каталог удаляется каждый раз перед началом сборки (это поведение можно отключить опцией --no-clean в команде сборки).

    Совет

    Всегда используйте outputDir вместо изменения опции webpack output.path.

assetsDir

  • Тип: string

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

    Каталог (относительно outputDir) для хранения сгенерированных статических ресурсов (js, css, img, fonts).

    Совет

    assetsDir игнорируется при перезаписи опций имени файла (filename) или имени фрагментов (chunkFilename) сгенерированных ресурсов.

indexPath

  • Тип: string

  • По умолчанию: 'index.html'

    Путь к сгенерированному index.html (относительно outputDir). Также можно указать абсолютный путь.

filenameHashing

  • Тип: boolean

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

    По умолчанию генерируемые статические ресурсы содержат хэши в именах файлов для лучшего управления кэшированием. Однако для этого требуется чтобы индексный HTML автоматически генерировался Vue CLI. Если вы не можете использовать индексный HTML, генерируемый CLI, можно отключить хэширование в именах файлов, установив параметр в значение false.

pages

  • Тип: Object

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

    Сборка приложения в многостраничном режиме (MPA). У каждой «страницы» должна быть соответствующая точка входа (entry) в виде JavaScript-файла. Значением может быть объект, где ключ — имя точки входа, а значение:

    • объектом, который определяет свои entry, template, filename, title и chunks (все опциональные, за исключением entry). Любые другие свойства, указанные рядом с ними будут переданы непосредственно в html-webpack-plugin, для возможности более тонкой настройки этого плагина;
    • или строкой, определяющей свою entry.
    module.exports = {
  pages: {
    index: {
      // точка входа для страницы
      entry: 'src/index/main.js',
      // исходный шаблон
      template: 'public/index.html',
      // в результате будет dist/index.html
      filename: 'index.html',
      // когда используется опция title, то <title> в шаблоне
      // должен быть <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'Index Page',
      // все фрагменты, добавляемые на этой странице, по умолчанию
      // это извлечённые общий фрагмент и вендорный фрагмент.
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
    // когда используется строковый формат точки входа, то
    // шаблон будет определяться как `public/subpage.html`,
    // а если таковой не будет найден, то `public/index.html`.
    // Выходное имя файла будет определено как `subpage.html`.
    subpage: 'src/subpage/main.js'
  }
}

    Совет

    При сборке в многостраничном режиме, конфигурация webpack будет содержать разные плагины (будут несколько экземпляров html-webpack-plugin и preload-webpack-plugin). Чтобы убедиться в корректности, проверяйте конфигурацию командой vue inspect, если вы изменяете настройки для этих плагинов.

lintOnSave

  • Тип: boolean | 'warning' | 'default' | 'error'

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

    Выполнять ли линтинг кода при сохранении во время разработки с помощью eslint-loader. Эта опция действует только когда установлен плагин @vue/cli-plugin-eslint.

    Когда значение true или 'warning', eslint-loader показывает ошибки линтинга как предупреждения. По умолчанию предупреждения выводятся в терминал и не останавливают сборку ошибкой, поэтому это хорошее значение по умолчанию для разработки.

    Для отображения ошибок линтинга в браузере можно указать lintOnSave: 'default'. Это заставит eslint-loader генерировать ошибки и любые ошибки линтинга приведут к неудаче компиляции сборки.

    Установка значения в 'error' заставит eslint-loader считать все предупреждения ошибками, а значит и они будут отображены в браузере.

    Кроме того, можно настроить отображение в браузере предупреждений и ошибок:

    // vue.config.js
module.exports = {
  devServer: {
    overlay: {
      warnings: true,
      errors: true
    }
  }
}

    Когда значение lintOnSave приводится к true, eslint-loader будет применяться как в разработке, так и в production. Если вы хотите отключить eslint-loader при сборке в production, можете воспользоваться следующей конфигурацией:

    // vue.config.js
module.exports = {
  lintOnSave: process.env.NODE_ENV !== 'production'
}

runtimeCompiler

  • Тип: boolean

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

    Использование сборки Vue которая содержит компилятор шаблонов. Установка значения в true позволит вам использовать опцию template в компонентах Vue, но дополнительно добавит 10 КБайт кода в ваше приложение.

    См. также: Runtime + Компилятор vs. Runtime-only.

transpileDependencies

  • Тип: Array<string | RegExp>

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

    По умолчанию babel-loader игнорирует все файлы из node_modules. Если вы хотите явно транспилировать зависимость с помощью Babel, то вы можете перечислить её в этой опции.

Конфигурация Jest

Эта опция не поддерживается плагином cli-unit-jest, потому что в Jest мы не должны транспилировать код из node_modules, если в нём не используются нестандартные возможности — Node >8.11 уже поддерживает последние нововведения ECMAScript.

Однако, Jest иногда требуется преобразовывать содержимое из node_modules, например если в этом коде используется синтаксис ES6 import/export. В таком случае используйте опцию transformIgnorePatterns в файле jest.config.js.

См. README плагина для получения дополнительной информации.

productionSourceMap

  • Тип: boolean

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

    Установка в false может ускорить сборку для production, если не требуются source maps.

crossorigin

  • Тип: string

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

    Настройка атрибутов crossorigin для тегов <link rel="stylesheet"> и <script> в сгенерированном HTML.

    Обратите внимание, это повлияет только на теги, внедряемые html-webpack-plugin — теги, добавленные непосредственно в шаблон (public/index.html) не затрагиваются.

    См. также: настройка атрибутов CORS

integrity

  • Тип: boolean

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

    Установите в значение true, чтобы использовать Subresource Integrity (SRI) для тегов <link rel="stylesheet"> и <script> в сгенерированном HTML. Если файлы сборки будут размещены на CDN, то рекомендуется включать опцию для дополнительной безопасности.

    Обратите внимание, это повлияет только на теги внедряемые html-webpack-plugin — теги добавленные непосредственно в шаблон (public/index.html) не затрагиваются.

    Кроме того, когда включён SRI, подсказки preload ресурсов отключены из-за ошибки в Chrome, которая заставляет ресурсы загружаться дважды.

configureWebpack

  • Тип: Object | Function

    Если значение объект — он будет объединён в финальную конфигурацию с помощью webpack-merge.

    Если значение функция — она получит итоговую конфигурацию в качестве аргумента. Функция может либо изменить конфигурацию, либо ничего не возвращать, ИЛИ вернуть клонированную или объединённую версию конфигурации.

    См. также: Работа с Webpack — Простая конфигурация

chainWebpack

css.modules

Устаревшая опция, начиная с версии v4, используйте вместо неё css.requireModuleExtension.

В версии v3 это противоположность опции css.requireModuleExtension.

css.requireModuleExtension

  • Тип: boolean

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

    По умолчанию, только файлы заканчивающиеся на *.module.[ext] обрабатываются как CSS-модули. Установка в значение false позволит вам убрать .module из имён файлов и обрабатывать все *.(css|scss|sass|less|styl(us)?) файлы как CSS-модули.

    СОВЕТ

    Если в css.loaderOptions.css есть настроенные конфигурации CSS-модулей, то поле css.requireModuleExtension должно быть явно указано в true или false, иначе нельзя быть уверенным необходимо ли применять эти параметры ко всем CSS-файлам или нет.

    См. также: Работа с CSS — CSS-модули

css.extract

  • Тип: boolean | Object

  • По умолчанию: true в режиме production, false в режиме development

    Извлечение CSS из ваших компонентов в отдельные CSS-файлы (вместо инлайна в JavaScript и динамического внедрения).

    Это всегда отключается при сборке веб-компонентов (в этом случае инлайн стили внедряются в shadowRoot).

    При сборке библиотеки вы можете также установить значение в false чтобы вашим пользователям не приходилось импортировать CSS самостоятельно.

    Извлечение CSS отключено по умолчанию в режиме development, поскольку оно несовместимо с горячей перезагрузкой CSS. Тем не менее, вы всё равно можете принудительно использовать извлечение стилей всегда, установив значение в true.

    Вместо true также можно передать объект с настройками для mini-css-extract-plugin если необходимо детальнее настроить работу этого плагина.

css.sourceMap

  • Тип: boolean

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

    Использование source maps для CSS. Установка этого значения в true может повлиять на производительность сборки.

css.loaderOptions

  • Тип: Object

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

    Передача настроек в загрузчики относящиеся к CSS. Например:

    module.exports = {
  css: {
    loaderOptions: {
      css: {
        // эти настройки будут переданы в css-loader
      },
      postcss: {
        // эти настройки будут переданы в postcss-loader
      }
    }
  }
}

    Поддерживаемые загрузчики:

    Также можно настроить синтаксис scss отдельно от sass через опцию scss.

    См. также: Передача настроек в загрузчики пре-процессоров

    Совет

    Этот способ предпочтительнее, чем менять вручную конкретные загрузчики через chainWebpack, так как эти параметры могут применяться в нескольких местах, где используется соответствующий загрузчик.

devServer

  • Тип: Object

    Поддерживаются все настройки для webpack-dev-server, но следует обратить внимание:

    • Некоторые значения, такие как host, port и https, могут перезаписываться флагами командной строки.

    • Некоторые значения, такие как publicPath и historyApiFallback, нельзя изменять, поскольку они должны быть синхронизированы с publicPath для правильной работы сервера разработки.

devServer.proxy

  • Тип: string | Object

    Если ваше фронтенд-приложение и бэкенд сервер API не работают на одном хосте, то вам понадобится на этапе разработки проксировать запросы к API. Это можно настроить с помощью опции devServer.proxy в файле vue.config.js.

    devServer.proxy может быть строкой, указывающей на сервер API для разработки:

    module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}

    Это скажет серверу разработки проксировать любые неизвестные запросы (запросы, которые не соответствуют статическому файлу) на адрес http://localhost:4000.

    ПРЕДУПРЕЖДЕНИЕ

    При указании devServer.proxy строкой будут проксироваться только XHR-запросы. Если необходимо протестировать API URL, не открывайте его в браузере, а вместо этого используйте инструмент для работы с API (например, Postman).

    Если вам нужно больше контроля поведения прокси-сервера, вы также можете использовать объект с парами опций path: options. См. полный список опций http-proxy-middleware:

    module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '^/foo': {
        target: '<other_url>'
      }
    }
  }
}

parallel

  • Тип: boolean | number

  • По умолчанию: require('os').cpus().length > 1

    Использовать ли thread-loader для транспиляции Babel или TypeScript. Включается для production-сборок, когда система имеет более 1 процессорных ядер. Указание числа определит количество задействованных воркеров (workers).

Внимание

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

pwa

pluginOptions

  • Тип: Object

    Этот объект не проходит никакой валидации своей структуры, поэтому можно его использовать для передачи произвольных параметров сторонним плагинам. Например:

    module.exports = {
  pluginOptions: {
    foo: {
      // плагины могут получить доступ к этим настройкам
      // через `options.pluginOptions.foo`.
    }
  }
}

Babel

Babel можно настроить через файл конфигурации babel.config.js.

Совет

Vue CLI использует babel.config.js — новый формат конфигурации Babel 7. В отличие от .babelrc или поля babel в package.json, этот файл конфигурации не использует разрешение на основе расположения файлов в проекте и последовательно применяется к каждому файлу, включая зависимости внутри node_modules. Рекомендуется всегда использовать babel.config.js в проектах Vue CLI вместо других форматов.

Все приложения Vue CLI используют @vue/babel-preset-app, который включает в себя babel-preset-env, поддержку JSX и оптимизированную конфигурацию для получения итоговой сборки минимального размера. Подробнее в его документации и опциях пресета.

Подробнее в разделе Полифилы этого руководства.

ESLint

ESLint можно настроить через .eslintrc или поле eslintConfig в файле package.json.

Подробнее на странице плагина @vue/cli-plugin-eslint.

TypeScript

TypeScript можно настроить через tsconfig.json.

Подробнее на странице плагина @vue/cli-plugin-typescript.

Модульное тестирование

Jest

Подробнее на странице плагина @vue/cli-plugin-unit-jest.

Mocha (через mocha-webpack)

Подробнее на странице плагина @vue/cli-plugin-unit-mocha.

E2E тестирование

Cypress

Подробнее на странице плагина @vue/cli-plugin-e2e-cypress.

Nightwatch

Подробнее на странице плагина @vue/cli-plugin-e2e-nightwatch.

WebdriverIO

Подробнее на странице плагина @vue/cli-plugin-e2e-webdriverio.