前言
因为项目采用UI组件element-ui，需要部署后（打包后）设置主题，在网上找了一遍，如下几种方法。
1/使用全局样式覆盖（工作量大）
2/自定义element-ui配色，element-ui提供了一个配置页面和配色工具，可以本地生成固定的几套主题色，以便来实现主题切换（编译后无法修改）
3/ 通过后端返回css文件，前端配合使用localStorage，储存主题对应的参数，后端返回对应的css主题文件（和方法2一样，需要先生成多个主题css文件）
4/通过改变element-ui的样式变量（无法将变量通过js传入）
$--color-primary: #409EFF; // 主题色$--color-success: #52C41A; // 成功颜色$--color-warning: #FAAD14; // 警告颜色$--color-danger: #F5222D; // 错误危险颜色$--color-info: #999999; // 信息颜色
上面的方案都无法满足编译后修改element-ui主题，最终找到webpack-theme-color-replacer解决。
步骤一
安装webpack-theme-color-replacer
npm install ---save webpack-theme-color-replacer
步骤二
vue.config.js引入插件
const ThemeColorReplacer = require('webpack-theme-color-replacer')const forElementUI = require('webpack-theme-color-replacer/forElementUI')
chainWebpack: config => {// 自定义换肤config.plugin('webpack-theme-color-replacer').use(ThemeColorReplacer).tap(options => {const matchColors = []const data = ['#409EFF', '#52C41A', '#FAAD14', '#F5222D', '#999999']data.forEach(item => {matchColors.push(...forElementUI.getElementUISeries(item))})options[0] = {fileName: 'css/theme-colors-[contenthash:8].css',matchColors: matchColors,changeSelector: forElementUI.changeSelector,isJsUgly: process.env.NODE_ENV !== 'development'}return options})}
我这边是修改了5种element-ui按钮类型的样式
步骤三
新建themColorClient.js文件来切换主题，代码如下
import client from 'webpack-theme-color-replacer/client'import forElementUI from 'webpack-theme-color-replacer/forElementUI'export const curColor = window.g.ThemeColor// 动态切换主题色export function changeThemeColor () {const data = []Object.values(curColor).forEach(item => {data.push(...forElementUI.getElementUISeries(rgbToHex(item)))})const options = {newColors: data,changeUrl (cssUrl) {console.log('cssUrl', cssUrl)return `${window.g.VUE_DYD_CONFIG_URL}/${cssUrl}`}}return client.changer.changeColor(options, Promise)}export function rgbToHex (rgb) {if (rgb.indexOf('rgb') > -1) {// rgb(x, y, z)const color = rgb.replace(/(?:\(|\)|rgba|RGBA)*/g, '').split(',') // 把 x,y,z 推送到 color 数组里let hex = '#'for (let i = 0; i < 3; i++) {// 'Number.toString(16)' 是JS默认能实现转换成16进制数的方法.// 'color[i]' 是数组，要转换成字符串.// 如果结果是一位数，就在前面补零。例如： A变成0Ahex += ('0' + Number(color[i]).toString(16)).slice(-2)}return hex} else {return rgb}}
changeThemeColor 设置主题颜色
rgbToHex rgba转hex 因为项目中之前配置的颜色有rgba的所以这边需要转译下forElementUI.getElementUISeries 只支持 hex
为了便于用户配置对应的主题色，我这边设置的是对象，对应element-ui的五个按钮色调
步骤四
调用 changeThemeColor方法
在main.js里初始化调用initThemeColor
注意事项
如果运行提示生成的css文件未找到，一般都是由于vue.config.js里的这块设置的颜色没有对应的主题色
之前参考网上的文章无法做到一对一的改变，是因为没有一一对应，需使用forElementUI.getElementUISeries方法实现对应
项目中用到webpackModuleFederationPlugin实现分包，多项目编译时，导致其中一个项目中主题css文件找不到，需要在themColorClient.js中配置如下
window.g.VUE_DYD_CONFIG_URL为另外一个项目的访问地址，如当前项目本地服务为localhost:8081，另一个项目为localhost:8082,则这块配置为localhost:8082，这块个人觉得跟ModuleFederationPlugin remotes有关，有了解朋友欢迎一起讨论
