Question

我的Vue应用程序只有一个代码库，但是对于不同的最终用户，我需要用不同的样式来编译此应用程序。假设在我的public（或assests）文件夹中，每个单个最终用户都有css的子文件夹（实际上，用户是指一个组/组织）。所以，我有类似的子文件夹：

\public\user1\all.css
\public\user2\all.css
\public\user3\all.css

在构建应用程序（npm run build）时，我需要以某种方式应用特定的样式。像

$ npm run build -css_path \public\user1\all.css

但是我不知道这在技术上是否可行以及我是否走上了正确的道路。可能应该以其他方式进行。那么，在构建或编译阶段动态地将不同样式应用于Vue应用程序的最佳实践是什么？

Answer 1

您可以使用特定值指定环境变量，在您的情况下，我认为它将是userN值。

如果public目录中的css文件。只需使用环境变量引用index.html中的css文件即可：
```
<link rel="stylesheet" type="text/css" href="<%= BASE_URL %><%= VUE_APP_MY_VARIABLE %>/all.css">
```
并使用VUE_APP_MY_VARIABLE=user1 npm run build
如果assets目录中的css文件。使用相同的env变量，但是我们应该在main.js的顶部导入该css文件（如果使用默认项目结构）：
```
require('./assets/custom/' + process.env.VUE_APP_MY_VARIABLE + '/all.css');
```
或
```
import(/* webpackMode: "eager" */'./assets/custom/' + process.env.VUE_APP_MY_VARIABLE + '/all.css');
```
并使用VUE_APP_MY_VARIABLE=user1 npm run build进行构建。

我还建议使用.env.local创建VUE_APP_MY_VARIABLE=user1，以便能够为您的本地网站提供服务并引用一些默认样式来调试您的应用。

P.S。选中cross-env软件包，可通过传递env变量使您的生活更轻松。因为我的构建字符串与bash有关。有了这个软件包，它将是跨平台的：

cross-env VUE_APP_MY_VARIABLE=user1 npm run build