Vue.js Vue和Webpack中的动态导入路径

我正在VueJS 2（和Vue CLI 3）中创建一个前端项目，该项目将由不同的客户端使用，我希望能够在webpack构建过程中以参数化方式根据存储在以下位置的CID导入我需要的所有内容（JS文件，如mixin、组件代码和CSS/LESS文件）： 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>

。。。

…这样，当使用真实的文件夹名称进行编译时，无论这些名称是什么，网页包都可以替换这些

CLIENTID

引用。这也必须适用于任何其他文件路径（例如，当使用诸如

从“/path/CLIENTID/to/file”

导入内容之类的语句时）

---

将这样一个变量注入到构建过程中，最简单的解决方案是什么？谢谢

作为一种选择，可以使用别名和体系结构规则的组合来实现所需的功能

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'

如果您计划为不同的客户机提供多个版本，那么将项目架构重构为可以为每个

客户ID

拆分所有相关资产的架构可能会很有用，例如：

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'

---

一种有趣的方法。我甚至可以将代码库拆分成Git子模块，所以我在下面使用并创建了别名。例如，但似乎有多种方法可以做到这一点。您是否最终使用下面提出的解决方案投入生产？我面临着类似的挑战，但没有太多真正特定于客户端的组件。实际上没有，我实现了一个反模式，它使用CSS类和JS条件临时工作（导入所有项目的所有代码）由于我们的时间表，但我计划重构项目，以使用选定答案中概述的解决方案，其中Webpack将根据环境变量动态导入文件。这不是一个大项目，也不是一个高度优先的项目。然而，当我着手重构它时，我会在这里发布更多的细节。这只是一个小的更新-我最终还是接受了接受的答案，并重构了应用程序，将CLIENTID用作项目文件路径中的别名。这对我们很有效。它不是100%完美，但它非常灵活，易于设置，而且以这种方式维护起来更容易。在实现此目标时，此用例的推荐方法不会过多地干扰默认的Vue项目设置。