前言
因为项目采用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有关,有了解朋友欢迎一起讨论