我正在使用VueJS 2(和Vue-CLI 3)创建一个前端项目,将被不同客户使用。我希望能够在webpack构建过程中根据存储在以下任一位置的CID参数化地导入所需的所有内容(例如JS文件、混合文件和组件代码以及CSS / LESS文件):
1)Vue .env文件中,
2)Webpack配置文件中某个位置,
3)通过“npm run watch”和“npm run build”命令行传递参数。
我搜索了许多解决方案(Webpack插件等),但它们都不够简单或优雅,我也无法真正理解Webpack的内部工作方式来实现这些解决方案,大多数都与动态加载有关而不是动态构建过程。不同的客户需要不同的代码和样式,例如:
这些路径需要转换为以下内容之一:
我搜索了许多解决方案(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";
语句时)。
注入此类变量到构建过程中的最简单解决方案是什么?谢谢!