vue+webpack 更换主题N种方案优劣分析

需求：由于业务需要，我们需要做多套皮肤

调研了下当前行业的实现方案，五花八门良莠不齐，在此总结下各种方案有优劣及复杂度，供大家快速定位到符合自己业务的方案，以vue 单页应用为业务场景

方式一：class切换方式

实现：

在每个需要更换的页面定义多个class，根据运行时标识动态的切换class名称实现加载不同的样式，这种方式较为简单

优点：

不需要修改构建工具相关
业务开发过程可以实现，没有限制
支持动态切换

缺点：

逻辑分散耦合在各个页面，一旦需要修改，涉及修改的页面较多
代码需要预先内置，不支持动态颜色修改

方式二：ElementUI的实现

实现：

对主题涉及的颜色使用特殊值

如:UI需要白色#ffffff色值的时候使用一个相近的特征值颜色 如:#fffffe

// 将默认样式特征值替换为变量，用于多次替换
   getStyleTemplate(data) {
    const colorMap = {
     '#fffffe': 'text_color'
    };
    Object.keys(colorMap).forEach(key => {
     const value = colorMap[key];
     data = data.replace(new RegExp(key, 'ig'), value);
    });
    return data;
   },

在代码运行时动态获取到需要修改的颜色值

如: 需要修改#fffffe =》 #ff00ff

// 通过用户操作或者接口，获取到要替换的色值
 colors:{
     text_color: '#ff00ff'
    }

查找页面所有style标签将其色值#fffffe正则匹配出来，替换为 #ff00ff

// 获取默认样式,可以从已加载的 style 中获取也可以从 css link 获取
   getIndexStyle() {
    document.querySelectorAll('style').forEach(item=>{
     this.originalStyle += this.getStyleTemplate(item.textContent);
    })
   },
   getCssLink(){
     this.get('./cssPath.css').then(json=>{
       this.originalStyle = this.getStyleTemplate(json.data);
     })
   }

在页面新加标签style覆盖默认值

// 替换默认样式表，插入 style 标签覆盖样式
   writeNewStyle() {
    let cssText = this.originalStyle;
    log(cssText)
    Object.keys(this.colors).forEach(key => {
     cssText = cssText.replace(new RegExp('(:|s+)' + key, 'g'), '$1' + this.colors[key]);
    });
    cssText = cssText.replace(/n/g,'')
    if (this.originalStylesheetCount === document.styleSheets.length) {
     const style = document.createElement('style');
     style.innerText = cssText;
     document.head.appendChild(style);
    } else {
     document.head.lastChild.innerText = cssText;								 
 1/3    1 2 3 下一页 尾页