vue动态换肤（elementui+webpack-theme-color-replacer）

利用webpack-theme-color-replacer插件，为elementui实现了在运行时动态切换主题色的功能，无需在页面进行less的编译，提升了切换速度。 好了，废话不多说，直接上代码 image.png vue/cli3脚手架下载下来后，改动这几个文件。 /*/config/app-config.js*/ module.exports = { LOGIN_PATH: './', title: 'vue + webpack4 + element-ui脚手架项目', description: 'vue + webpack4 + element-ui脚手架项目', themeColor: '#409EFF' // 这个色号必须和主题色是一个颜色才行，要不然出来的css模板文件是空的 } /*/vue.config.js*/ const webpack = require('webpack') const ThemeColorReplacer = require('webpack-theme-color-replacer') const forElementUI = require('webpack-theme-color-replacer/forElementUI') const appConfig = require('./config/app-config.js') module.exports = { configureWebpack: { plugins: [ // 生成仅包含颜色的替换样式（主题色等） new ThemeColorReplacer({ fileName: 'style/theme-colors.[contenthash:8].css', matchColors: [ ...forElementUI.getElementUISeries(appConfig.themeColor) ], changeSelector: forElementUI.changeSelector, isJsUgly: process.env.NODE_ENV === 'production' ? true : undefined }) ] } } 如果是cli2的话，这个文件中的plugins定义在build/webpack.base.conf.js中。 /*/src/utils/themeColorClient.js*/ import client from 'webpack-theme-color-replacer/client' import forElementUI from 'webpack-theme-color-replacer/forElementUI' // 注意自己项目里的引入路径 import appConfig from '../../config/app-config' export let curColor = appConfig.themeColor // 动态切换主题色 export function changeThemeColor(newColor) { var options = { newColors: [...forElementUI.getElementUISeries(newColor)] } return client.changer.changeColor(options, Promise) .then(() => { curColor = newColor localStorage.setItem('theme_color', curColor) }) } export function initThemeColor() { const savedColor = localStorage.getItem('theme_color') if (savedColor) { curColor = savedColor changeThemeColor(savedColor) } } /*/src/main.js*/ import Vue from "vue"; import App from "./App.vue"; import router from "./router"; import store from "./store"; Vue.config.productionTip = false; import ElementUI from 'element-ui'; Vue.use(ElementUI) // 主题换肤 import { initThemeColor } from './utils/themeColorClient' initThemeColor(); new Vue({ router, store, render: h => h(App) }).$mount("#app"); /*/src/views/Home.vue*/ 最后，一定不能遗漏babel.config.js的修改，当时我也是没有修改babel这里，鼓捣了半天。（babel还在学习中，也不知道原因是啥） module.exports = { presets: ["@vue/cli-plugin-babel/preset"], plugins: [ [ 'babel-plugin-component', { libraryName: 'element-ui', styleLibraryName: '~node_modules/element-theme-chalk/src', ext: '.scss' } ] ], }; 来看一下运行效果吧~ image.png 当点击按钮，换肤后： image.png 不管是自定义的颜色，还是elementui的颜色，都被替换了。

本文章由javascript技术分享原创和收集