⚠️ Vue CLI is in Maintenance Mode!

For new projects, it is now recommended to use create-vue to scaffold Vite-based projects. Also refer to the Vue 3 Tooling Guide for the latest recommendations.

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

Глобальная конфигурация 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

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
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

Тип: Function
Функция, которая получает экземпляр ChainableConfig с помощью webpack-chain. Позволяет производить более тонкую настройку внутренней конфигурации webpack.
См. также: Работа с Webpack — Chaining (Продвинутый вариант)

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>'
      }
    }
  }
}
```

devServer.inline

Тип: boolean
По умолчанию: true
Переключение между двумя режимами работы сервера разработки. Более подробная информация об опции — devServer.inline. Обратите внимание:
- При использовании iframe mode дополнительная конфигурация не требуется. Просто перейдите в браузере по адресу http://<host>:<port>/webpack-dev-server/<path> для отладки приложения. В верхней части страницы будут появляться уведомления.
- При использовании inline mode, просто перейдите в браузере по адресу http://<host>:<port>/<path> для отладки приложения. Сообщения о сборке будут появляться в консоли браузера.

parallel

Тип: boolean | number
По умолчанию: require('os').cpus().length > 1
Использовать ли thread-loader для транспиляции Babel или TypeScript. Включается для production-сборок, когда система имеет более 1 процессорных ядер. Указание числа определит количество задействованных воркеров (workers).

Внимание

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

pwa

Тип: Object
Конфигурация для плагина 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.

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

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

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

vue.config.js #

baseUrl #

publicPath #

outputDir #

assetsDir #

indexPath #

filenameHashing #

pages #

lintOnSave #

runtimeCompiler #

transpileDependencies #

productionSourceMap #

crossorigin #

integrity #

configureWebpack #

chainWebpack #

css.modules #

css.requireModuleExtension #

css.extract #

css.sourceMap #

css.loaderOptions #

devServer #

devServer.proxy #

devServer.inline #

parallel #

pwa #

pluginOptions #

Babel #

ESLint #

TypeScript #

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

Jest #

Mocha (через mocha-webpack) #

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

Cypress #

Nightwatch #

WebdriverIO #