⚠️ 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.

Цели сборки

При запуске vue-cli-service build вы можете определить цели сборки опцией --target. Это позволит использовать одну кодовую базу для создания сборок под различные случаи.

Приложение (App)

Приложение — цель сборки по умолчанию. В этом режиме:

  • index.html с внедрением ресурсов и подсказок для пред-загрузки
  • сторонние библиотеки разделяются на отдельные фрагменты для лучшего кэширования
  • статические ресурсы менее 8 КБайт будут вставлены инлайн в JavaScript
  • статические ресурсы в public будут скопированы в каталог сборки

Библиотека (Library)

Примечание о зависимости Vue

В режиме библиотеки Vue экстернализируется. Это означает, что сборка не будет содержать Vue, даже если ваш код его импортирует. Если библиотека используется через сборщик, он должен попытаться загрузить Vue в качестве зависимости через сборщик; в противном случае, он должен вернуться к глобальной переменной Vue.

Чтобы избежать экстернализиции Vue установите флаг --inline-vue для команды build.

vue-cli-service build --target lib --inline-vue

Вы можете запустить сборку одной точки входа в качестве библиотеки с помощью:

vue-cli-service build --target lib --name myLib [entry]
File                     Size                     Gzipped

dist/myLib.umd.min.js    13.28 kb                 8.42 kb
dist/myLib.umd.js        20.95 kb                 10.22 kb
dist/myLib.common.js     20.57 kb                 10.09 kb
dist/myLib.css           0.33 kb                  0.23 kb

Точка входа может быть .js или .vue файлом. Если точка входа не указана, то будет использоваться src/App.vue.

Сборка библиотеки сгенерирует:

  • dist/myLib.common.js: сборка CommonJS для использования в сборщиках (к сожалению, webpack в настоящее время пока ещё не поддерживает формат ES-модулей для сборок)

  • dist/myLib.umd.js: сборка UMD для использования в браузерах или с AMD загрузчиками

  • dist/myLib.umd.min.js: минифицированная версия UMD сборки.

  • dist/myLib.css: извлечённый CSS-файл (можно принудительно вставлять стили инлайн, установив css: { extract: false } в vue.config.js)

ВНИМАНИЕ

При разработке библиотеки или использования монорепозитория, имейте ввиду, что CSS-импорты являются побочными эффектами (side effects). Убедитесь, что удалили опцию "sideEffects": false из файла package.json, в противном случае webpack будет удалять CSS-фрагменты при сборке для production.

Vue vs. JS / TS файлы точек входа

При использовании .vue файла в качестве точки входа, библиотека будет экспортировать сам компонент Vue, потому что компонент всегда имеет экспорт по умолчанию (export default).

Однако, когда используется .js или .ts файл в качестве точки входа, он может содержать именованные экспорты, поэтому библиотека будет использоваться как модуль. Это означает, что экспорт библиотеки по умолчанию должен быть доступен как window.yourLib.default в UMD сборках, или как const myLib = require('mylib').default в CommonJS сборках. Если у вас нет именованных экспортов и вы хотите использовать экспорт по умолчанию (default export), вы можете использовать следующую конфигурацию webpack в vue.config.js:

module.exports = {
  configureWebpack: {
    output: {
      libraryExport: 'default'
    }
  }
}

Веб-компонент (Web Component)

Примечание совместимости

Режим веб-компонентов не поддерживается IE11 и ниже. Подробнее

Примечание зависимости Vue

В режиме веб-компонентов Vue экстернализируется. Это означает, что сборка не будет содержать Vue, даже если ваш код его импортирует. Сборка будет подразумевать, что Vue доступен на странице в качестве глобальной переменной.

Чтобы избежать экстернализиции Vue установите флаг --inline-vue для команды build.

vue-cli-service build --target wc --inline-vue

Вы можете запустить сборку одной точки входа в качестве веб-компонента с помощью:

vue-cli-service build --target wc --name my-element [entry]

Обратите внимание, что точка входа должна быть *.vue файлом. Vue CLI автоматически обернёт и зарегистрирует компонент как веб-компонент за вас, и нет необходимости делать это самостоятельно в main.js. Можно использовать main.js в качестве демо-приложения исключительно для разработки.

Сборка создаст один файл JavaScript (и его минифицированную версию) содержащий всё необходимое. Скрипт, когда добавлен на странице, зарегистрирует пользовательский элемент <my-element>, который оборачивает компонент Vue с помощью @vue/web-component-wrapper. Обёртка автоматически проксирует свойства, атрибуты, события и слоты. Подробнее можно узнать в документации @vue/web-component-wrapper.

Обратите внимание, что сборка зависит от Vue глобально доступного на странице.

Этот режим позволяет использовать компонент Vue как обычный элемент DOM:

<script src="https://unpkg.com/vue"></script>
<script src="path/to/my-element.js"></script>

<!-- используем в простом HTML, или в любых других фреймворках -->
<my-element></my-element>

Сборка, регистрирующая несколько веб-компонентов

При сборке веб-компонентов можно также указать несколько компонентов с помощью выражения в качестве входной точки:

vue-cli-service build --target wc --name foo 'src/components/*.vue'

При сборке нескольких веб-компонентов --name будет использовано в качестве префикса, а имя пользовательского элемента будет определяться именем файла компонента. Например, для --name foo и компонента HelloWorld.vue, итоговый пользовательский элемент будет зарегистрирован как <foo-hello-world>.

Асинхронный веб-компонент (Async Web Component)

При указании нескольких веб-компонентов, сборка может стать довольно большой, а пользователь использовать только некоторые из компонентов, которые регистрирует сборка. Режим асинхронных веб-компонентов создаёт сборку, разделённую на части, с маленьким файлом точки входа, который обеспечивает общий runtime между всеми компонентами, и заранее регистрирует все пользовательские элементы. Фактическая реализация компонента загружается по требованию, только когда экземпляр соответствующего пользовательского элемента используется на странице:

vue-cli-service build --target wc-async --name foo 'src/components/*.vue'
File                Size                        Gzipped

dist/foo.0.min.js    12.80 kb                    8.09 kb
dist/foo.min.js      7.45 kb                     3.17 kb
dist/foo.1.min.js    2.91 kb                     1.02 kb
dist/foo.js          22.51 kb                    6.67 kb
dist/foo.0.js        17.27 kb                    8.83 kb
dist/foo.1.js        5.24 kb                     1.64 kb

Теперь на странице пользователю необходимо только подключить Vue и файл точки входа:

<script src="https://unpkg.com/vue"></script>
<script src="path/to/foo.min.js"></script>

<!-- фрагмент с реализацией foo-one загрузится автоматически когда потребуется -->
<foo-one></foo-one>

Использование vuex в сборках

При создании Веб-компонента или Библиотеки, точкой входа будет не main.js, а файл entry-wc.js, генерируемый здесь: https://github.com/vuejs/vue-cli/blob/dev/packages/%40vue/cli-service/lib/commands/build/resolveWcEntry.js

Поэтому для использования vuex при сборке веб-компонента необходимо инициализировать хранилище в App.vue:

import store from './store'

// ...

export default {
  store,
  name: 'App',
  // ...
}