Skip to content

Latest commit

 

History

History

config

Folders and files

NameName
Last commit message
Last commit date

parent directory

..

README.md

README.md

 
 

README.md

sidebar
auto

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

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

    ::: warning Ограничения относительного 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 в команде сборки).

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

assetsDir

  • Тип: string

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

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

    ::: tip Совет 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'
  }
}

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

lintOnSave

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

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

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

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

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

    Установка значения в 'errors' заставит 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, то вы можете перечислить её в этой опции.

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

    ::: tip СОВЕТ Если в 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.

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

    ::: tip Совет Этот способ предпочтительнее, чем менять вручную конкретные загрузчики через 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.

    ::: warning ПРЕДУПРЕЖДЕНИЕ При указании 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).

pwa

pluginOptions

  • Тип: Object

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

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

Babel

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

::: tip Совет 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.