Dynamic import paths in Vue and Webpack

As one option, it is possible to use combination of aliases and architectural rules in order to achieve requested functionality.

1) Pass CLIENTID through an environmental variable or export it from any custom config file. Since CI is mentioned, let's suggest process.env is used.

2) Create aliases for all relevant paths that should be available for imports. It can be done in vue.config.js (in case of @vue/cli 3.0+) or inside a webpack config file.

Example for paths mentioned above:

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

3) Change project structure to contain client specific component's into separate folders, while keeping shared code available via default paths.

4) Use aliases, that will resolve correct paths:

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

If you have a plan to bring many versions for different clients, it may be useful to refactor project architecture to something that will split all relevant assets for each CLIENTID, e.g.:

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

This way aliases will be event more convenient to declare and use:

'~common': `src/common`'~client': `src/${process.env.CLIENTID}`  import CommonButton from '~common/components/common-button.vue'import CustomButton from '~client/components/custom-button.vue'