Vue 和 Webpack 中的动态导入路径

Question

我正在 VueJS 2（和 Vue-CLI 3）中创建一个前端项目，它将被不同的客户端使用，我希望能够基本上导入我需要的所有内容（JS 文件，如 mixin 和组件代码以及 CSS/LESS 文件) 在 webpack 构建过程中，基于将存储在以下位置的 CID 参数化：1) Vue .env 文件或 2) webpack 配置文件中的某处或 3) 作为参数传递给npm run watchand 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";）。

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

Answer 1

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

1) 传递CLIENTID环境变量或从任何自定义配置文件中导出它。既然提到了 CI，我们建议process.env使用。

2) 为所有应该可用于导入的相关路径创建别名。它可以在vue.config.js（在@vue/cli3.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'