webpack-theme-color-replacer插件，实

webpack-theme-color-replacer插件，实现全局修改主题色
注：webpack-theme-color-replacer插件只支持一级路由，暂不支持子路由中，在子路由中页面是无效的！
1.首先安装插件

npm install ---save webpack-theme-color-replacer

2.然后代码如下：
main.js

//主题色
import './style/element-variables.scss'
import { initThemeColor } from './utils/themeColorClient'
initThemeColor();

theme.vue

<template>
    <el-color-picker 
        v-model="mainColor" 
        size="small"
        @change="changeColor"
    >
    </el-color-picker>
</template>
<script>
import { changeThemeColor, curColor } from '@/utils/themeColorClient'
import { message } from '@/utils/message'
export default {
    data(){
        return {
            color: '#138C35',
            mainColor: curColor
        }
    },
    methods: {
        changeColor(newColor) {
            changeThemeColor(newColor).then(() => {
                message('主题色切换成功啦~')
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.el-color-picker {
    margin: 0 20px;
}
</style>

themColorClient.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), '#ff0000', '#ffff00']
  }
  return client.changer.changeColor(options, Promise)
    .then(() => {
      curColor = newColor
      sessionStorage.setItem('theme_color', curColor)
    })
}

export function initThemeColor() {
  const savedColor = sessionStorage.getItem('theme_color')
  if (savedColor) {
    curColor = savedColor
    changeThemeColor(savedColor)
  }
}

config/app-config.js

module.exports = {
    LOGIN_PATH: './',
    title: '',
    description: '',
    themeColor: '#009688' // 这个色号必须和主题色是一个颜色才行，要不然出来的css模板文件是空的
}

vue.config.js

const ThemeColorReplacer = require('webpack-theme-color-replacer')
const forElementUI = require('webpack-theme-color-replacer/forElementUI')

module.exports = {
    configureWebpack: {
        plugins: [
            // 生成仅包含颜色的替换样式（主题色等）
            new ThemeColorReplacer({
                fileName: 'style/theme-colors.[contenthash:8].css',
                matchColors: [
                ...forElementUI.getElementUISeries(process.env.VUE_APP_ELEMENT_COLOR), // element-ui主色系列          
                ],
                externalCssFiles: ['./node_modules/element-ui/lib/theme-chalk/index.css'],
                changeSelector: forElementUI.changeSelector,
            })
        ]
    }, 
};