作为一种选择,可以使用别名和架构规则的组合来实现所请求的功能。
1) Pass CLIENTID
通过环境变量或从任何自定义配置文件导出它。既然提到了CI,我们就建议一下process.env
用来。
2) 为可用于导入的所有相关路径创建别名。可以在vue.config.js
(的情况下@vue/cli
3.0+)或在 webpack 配置文件中。
上述路径的示例:
'~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
, e.g.:
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'