Динамические пути импорта в Vue и Webpack - PullRequest
Новая
       6

Динамические пути импорта в Vue и Webpack

0 голосов
/ 04 декабря 2018

Я создаю проект внешнего интерфейса в VueJS 2 (и Vue-CLI 3), который будет использоваться разными клиентами, и я хотел бы иметь возможность импортировать практически все, что мне нужно (файлы JS, такие как миксины и код компонента и CSS)/ LESS) во время процесса построения веб-пакета параметрически на основе CID, который будет храниться в: 1) файле Vue .env или 2) где-то в файле конфигурации веб-пакета или 3) передается в качестве параметра npm run watch и npm run build.

Я искал много решений (плагинов Webpack и т. Д.), Но ни одно из них не является простым или элегантным, и я не могу понять внутреннюю работу Webpack для реализации этих решений, и большинство из них связаны между собой.к динамической загрузке, а не к процессу динамической сборки.

Разным клиентам требуется разный код и стили, например: 

<template>...</template>
<script src="./component-code.js"></script>
<style src="@/styles/component-style.less"></style>

Эти пути должны были бы превратиться во что-то вроде этого: 

<template>...</template>
<script src="./CLIENTID/component-code.js"></script>
<style src="@/styles/CLIENTID/component-style.less"></style>

... так, чтобы Webpack мог заменить эти CLIENTID ссылки при компиляции с реальными именами папок, которыееще те, которые могут быть.Это также должно работать для любых других путей к файлам (например, при использовании операторов типа import something from "./path/CLIENTID/to/file";).

Что было бы самым простым решением для внедрения такой переменной в процесс сборки?Спасибо!

1 Ответ

0 голосов
/ 04 декабря 2018

В качестве одного варианта можно использовать комбинацию псевдонимов и архитектурных правил для достижения требуемой функциональности.

1) Пропустить CLIENTID через переменную среды или экспортировать ее из любого пользовательского файла конфигурации.Поскольку CI упоминается, давайте предположим, что используется process.env.

2) Создайте псевдонимы для всех соответствующих путей, которые должны быть доступны для импорта.Это можно сделать в vue.config.js (в случае @vue/cli 3.0+) или в конфигурационном файле веб-пакета.

Пример путей, упомянутых выше: 

'~styles': `src/styles/${process.env.CLIENTID}`
'~components': `src/components/${process.env.CLIENTID}`
'~something': `src/something/${process.env.CLIENTID}`

3) Изменить проектструктура для хранения специфичных для клиента компонентов в отдельных папках, при этом общий код будет доступен через пути по умолчанию.

4) Используйте псевдонимы, которые разрешат правильные пути: 

import CustomButton from '~components/custom-button.vue'

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

project |
        |-- common     |
        |              |--styles
        |              |--components
        |               
        |--CLIENTID_1  |
        |              |--styles
        |              |--components
        |
        |--CLIENTID_2  |
                       |--styles
                       |--components

Таким образом, псевдонимы будут более удобными длязаявить и использовать: 

'~common': `src/common`
'~client': `src/${process.env.CLIENTID}`  

import CommonButton from '~common/components/common-button.vue'
import CustomButton from '~client/components/custom-button.vue'
...