Vue和Webpack中的动态导入路径

Question

我正在使用VueJS 2（和Vue-CLI 3）创建一个前端项目，将被不同客户使用。我希望能够在webpack构建过程中根据存储在以下任一位置的CID参数化地导入所需的所有内容（例如JS文件、混合文件和组件代码以及CSS / LESS文件）： 1）Vue .env文件中， 2）Webpack配置文件中某个位置， 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";语句时）。

注入此类变量到构建过程中的最简单解决方案是什么？谢谢！

- Aleksandar Bencun

---

你最终采用下面提出的解决方案投入生产了吗？我也面临着类似的挑战，但没有太多真正针对客户的组件。 - ebbishop

实际上，我实现了一个反模式，使用CSS类和JS条件，暂时可以工作（导入所有项目的所有代码），因为我们的时间表，但我计划重构该项目，使用所选答案中概述的解决方案，其中Webpack将根据环境变量动态导入文件。这不是一个大项目，也不是一个高优先级的项目。然而，当我开始重构它时，我会在这里发布更多细节。 - Aleksandar Bencun

这只是一个小更新 - 我最终采用了被接受的答案，并重构了应用程序，以使用CLIENTID作为项目文件路径中的别名。对我们来说效果很好。虽然不是100％完美，但非常灵活且易于设置，以这种方式维护也更加容易。在不过多干扰默认Vue项目设置的情况下，这是实现此目标的推荐方法。 - Aleksandar Bencun

Answer 1

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

1）通过环境变量传递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的形式可能非常有用，例如：

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'

- aBiscuit

---

一个有趣的方法。我甚至可以将代码库拆分成Git子模块。 - Aleksandar Bencun

所以我使用了configureWebPack，并在resolve下创建了别名。例如这里，但似乎有多种方法可以实现这一点。 - HMR