Цели сборки #

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

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

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

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

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

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)

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) #

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',
  // ...
}