Вы хотели бы управлять своими приложениями с помощью сборки CLI Vue Webpack, но сохраняя гибкость, имея независимые компоненты Vue, т.е. служили в качестве отдельных файлов, которые являются общими для нескольких приложений / проектов. Это архитектура, которую вы описываете с помощью « внутреннего CDN ».
Как указал @RandyCasburn, вы можете достичь вышеуказанной цели, просто выставив Vue глобально (обычно загружая его в <script> из CDN), а затем загрузив ваши независимые файлы, которые используют Vue.component для глобальной регистрации ваших компонентов.
Справка: Как «импортировать» компонент Vuejs в index.html?
Однако вы хотели бы иметь возможность разрабатывать эти независимые компоненты Vue в виде отдельных файловых компонентов (SFC).
Я вижу в основном 2 интересных решения для использования, которое вы описываете:
- Заполнение пробела в создании небольшого инструмента шага сборки для преобразования вашего SFC в простой файл JS, который можно загрузить через тег
<script> и который регистрирует компонент глобально с помощью Vue.component.
- Вместо создания файла JS, который регистрируется через
Vue.component, сделайте так, чтобы он предоставлял объект конфигурации Vue Component / параметров , чтобы он мог быть локально зарегистрированным и загружается асинхронно . Это требует больше работы, потому что вам нужно настроить каждую конфигурацию веб-пакета потребительского приложения для асинхронной загрузки не связанных блоков.
Вариант 1: преобразование Vue SFC в один файл JS с помощью Vue.component
На самом деле существует недавний шаблонный проект, который предлагает эту функцию:
https://github.com/RonnieSan/vue-browser-sfc
Шаблон для настройки сборки для компиляции отдельных файловых компонентов (.vue) в автономный файл JS для использования в браузере
См. Также Компилировать компонент ".vue" в браузере, только с JS?
Он использует webpack для преобразования вашего .vue файла в скомпилированный JS-файл, который регистрирует компонент глобально с Vue.component.
Вы также можете сделать очень похожий процесс, используя Rollup вместо webpack, если вам интересен более простой код. Используйте rollup-plugin-vue .
Преимущество этого подхода состоит в том, что его легко понять, вам просто нужно провести рефакторинг вашего HTML-кода для загрузки Vue, а затем файлов JS всех ваших общих компонентов. Даже во время разработки эти компоненты должны быть доступны в глобальном масштабе, поэтому среда выполнения Vue не должна жаловаться на « Неизвестный пользовательский элемент », а в вашем потребительском приложении просто не import / объявляйте их.
Недостатком является то, что вам необходимо загружать все эти компоненты заранее, независимо от того, используете вы их или нет.
Вариант 2: преобразование Vue SFC в один файл JS как объект параметров «асинхронный»
Этот гораздо интереснее, но сложнее правильно настроить.
Как и в предыдущем решении, на стороне компонента вы используете шаг сборки для преобразования файла SFC .vue, но вам не нужна дополнительная оболочка с объявлением Vue.component. Просто сделайте, чтобы webpack или Rollup обернули объект опций компонента во IIFE или UMD, который регистрирует объект в глобальном контексте.
Например, ваш rollup.config.js файл будет выглядеть так:
import VuePlugin from 'rollup-plugin-vue'
export default {
input: 'components/my-component.vue',
output: {
file: 'dist/my-component.js',
name: 'MyComponent', // <= store the component on `window.MyComponent`
format: 'umd',
},
plugins: [VuePlugin()]
}
Затем в ваших пользовательских приложениях вы все еще import() и объявляете свои компоненты, но вам нужно настроить конфигурацию веб-пакета, чтобы он не связывал файлы в приложении, а асинхронно загружал их из сети. Например:
components: {
'my-component': () => import('my-component'),
},
Для этого вы можете использовать dynamic-cdn-webpack-plugin , но вы должны предоставить собственную функцию resolver, потому что по умолчанию module-to-cdn использует собственный список модулей , который не настраивается.
Вы перечисляете свои компоненты в опции массива only динамического cdn-webpack-plugin, предоставляете resolver, который имитирует module-to-cdn, но использует ваш собственный список. Например:
const modules = {
'my-component': {
var: 'MyComponent', // <= name under which the component will be stored.
versions: {
'*': {
development: 'http://localhost:8080/my-cdn/my-component.js',
production : 'http://localhost:8080/my-cdn/my-component.min.js',
},
},
},
};
Чтобы эта схема работала, вы также должны перечислить ваши компоненты как модули в ваших package.json зависимостях, возможно, с фиктивным локальным путем в качестве спецификации версии, чтобы убедиться, что вы не пытаетесь загрузить их из реестра npm.
Преимущество заключается в том, что вам не нужно прикасаться к вашим HTML-файлам, асинхронная загрузка напрямую управляется вашими приложениями. Вы можете связать Vue и не заботиться о порядке загрузки / последовательности. Компоненты CDN загружаются по требованию, когда это действительно необходимо.
Недостатком является то, что он требует более сложной конфигурации веб-пакетов для всех ваших пользовательских приложений, но он полностью управляем.