Как правильно собрать проект на vue из разных компонентов?

Question

[Ян]

Доброго дня, господа!

Есть набор компонентов (например, Header, Content, Footer), но есть разные версии этих компонентов (отличаются стилями, вёрсткой и текстами)

Вопрос в том, как правильно организовать загрузку нужных мне компонентов при билде проекта?

Comments

[Alex]

Так а в чем собственно проблема?

[Ян]

Alex, проблема в том что я не знаю как, блин, даже что у гугла спросить не знаю

Answer 1

[Aetae]

Просто используй alias, проставляя путь то нужного компонента на этапе билда.

Comments

[Ян]

спасибо, присиотрюсь, пока сделал на основе статичного объекта конфига, куда вписываю желаемые компоненты
и вывожу вот так

<component :is="template" v-for="(template, index) in returnConfigArray" :key="index" v-if="index === flow" @plus="test"   />

returnConfigArray - возвращает инклюды с путями до файлов через map

[Aetae]

Ян, т.е. вы вручную каждый раз этот файл меняете? Ибо если там if'ы какие, то там всё равно весь набор в бандле будет.

[Ян]

Aetae,

т.е. вы вручную каждый раз этот файл меняете?

пока так, да

не понял на счёт if...

[Aetae]

Ян, Если там что-то типа

const Header = ((version)=>{
switch(+version){
 case 3:
   return require('src/components/Header3.vue');
 case 2:
   return require('src/components/Header2.vue');
 default:
   return require('src/components/Header.vue')
}
})(process.env.VERSION);

то собраны будут всё равно все варианты.

С alias же вы просто делаете так:

// App.vue 
import Header from 'src/components/Header.vue'; //как обычно

// в vue.config
const path = require('path');
module.exports = {
	configureWebpack: {
		resolve: {
			alias: {
				'src/components/Header.vue': path.join(__dirname, `src/components/Header${process.env.VERSION}.vue`),
				'src': path.join(__dirname, 'src/'),
			}
		}
	}
}

[Ян]

Aetae, понял, спасибо

Answer 2

[Alex]

https://ru.vuejs.org/v2/guide/single-file-componen...
https://ru.vuejs.org/v2/guide/components-dynamic-a...

Comments

[Ян]

это я видел

собственно исходя из этих доков, как правильно сделать конфиг, чтобы я могу пометить какие компоненты мы пихаем в билд, а какие нет?

[Alex]

Ян, Зачем вам это?! У вас есть корневой компонент (условный App.vue), ваш зборщик загружает его, и загружает все его зависимые компоненты (Header, Content, Footer которые вы используете в App). Затем загружает зависимые компоненты для зависимых компонентов и так далее. Всё что вы используете в проекте будет включено в состав сборки, а всё что не используете — не будет.

Это стандартное поведение большинства сборщиков, насколько я знаю.

[Ян]

Alex, конкретно мне это вобще не упало, а вот "бизнес" желает :)
Может так понятнее будет, условно говоря есть набор
Header1 Header2 Header3
Content1 Content2 Content3
Footer1 Footer2 Footer3

бизнес хочет проставить, условно, галочки на нужных компонентах и сбилдить , например
Header2
Content3
Footer1

вот я и не понимаю пока каким образом это можно организовать