Цели сборки
При запуске 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',
// ...
}