vue项目打包后动态配置样式（切换主题）

有时候项目需要多套主题，根据不同节日来切换不同的节日，网上有很多方法可以实现。这里介绍vue打包后动态配置样式。

在https://blog.csdn.net/iorn_mangg/article/details/105967090这个基础上对配置文件进行修改

首先现在public中创建一个config.css样式配置文件，然后再index.html引入，内容：

/* 标题样式配置 */
.configTitleClass {
  /* background-color: red !important; */
}
/*全局主题配置*/
.themeClass {
  /* background-color: red !important; */
}
.themeClass::before {
  /* border-color: transparent red red transparent !important; */
}

然后在配置文件中加入样式的配置变量，configTitleClass是类名，可自己修改。

titleStyle:"configTitleClass", //标题样式Class名，可添加多个
    themeStyle:"themeClass" //标题样式Class名，可添加多个

然后再页面中加入配置的样式class,这里最好是在项目搭建初就定义好class名，然后在需要配置的页面中都加入这个配置。

这里的$configStyle是在main.js中根据配置文件中的样式配置定义的全局变量。

<div class="content" :class="$configStyle.titleStyle"></div>

然后build，试运行，修改配置样式文件，完美运行。