這篇文章主要為大家展示了“vue+webpack更換主題的方法有哪些”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“vue+webpack更換主題的方法有哪些”這篇文章吧。

湖南ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書未來市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

需求：由于業(yè)務(wù)需要，我們需要做多套皮膚

調(diào)研了下當(dāng)前行業(yè)的實(shí)現(xiàn)方案，五花八門良莠不齊，在此總結(jié)下各種方案有優(yōu)劣及復(fù)雜度，供大家快速定位到符合自己業(yè)務(wù)的方案，以vue 單頁(yè)應(yīng)用為業(yè)務(wù)場(chǎng)景

方式一：class切換方式

實(shí)現(xiàn)：

在每個(gè)需要更換的頁(yè)面定義多個(gè)class，根據(jù)運(yùn)行時(shí)標(biāo)識(shí)動(dòng)態(tài)的切換class名稱實(shí)現(xiàn)加載不同的樣式，這種方式較為簡(jiǎn)單

優(yōu)點(diǎn)：

• 不需要修改構(gòu)建工具相關(guān)

• 業(yè)務(wù)開發(fā)過程可以實(shí)現(xiàn)，沒有限制

• 支持動(dòng)態(tài)切換

缺點(diǎn)：

• 邏輯分散耦合在各個(gè)頁(yè)面，一旦需要修改，涉及修改的頁(yè)面較多

• 代碼需要預(yù)先內(nèi)置，不支持動(dòng)態(tài)顏色修改

方式二：ElementUI的實(shí)現(xiàn)

實(shí)現(xiàn)：

對(duì)主題涉及的顏色使用特殊值

如:UI需要白色#ffffff色值的時(shí)候使用一個(gè)相近的特征值顏色 如:#fffffe

// 將默認(rèn)樣式特征值替換為變量，用于多次替換
   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;
   },

在代碼運(yùn)行時(shí)動(dòng)態(tài)獲取到需要修改的顏色值

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

// 通過用戶操作或者接口，獲取到要替換的色值
 colors:{
     text_color: '#ff00ff'
    }

查找頁(yè)面所有style標(biāo)簽將其色值#fffffe正則匹配出來，替換為 #ff00ff

// 獲取默認(rèn)樣式,可以從已加載的 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);
     })
   }

在頁(yè)面新加標(biāo)簽style覆蓋默認(rèn)值

// 替換默認(rèn)樣式表，插入 style 標(biāo)簽覆蓋樣式
   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;
    }
   },

優(yōu)點(diǎn)：

• 支持動(dòng)態(tài)切換

• 支持動(dòng)態(tài)色值

• 不需要內(nèi)置多份樣式

缺點(diǎn)：

• 業(yè)務(wù)開發(fā)過程中需要對(duì)ui給出的色值重定義，業(yè)務(wù)開發(fā)需要有一定的規(guī)則

• 無法修改背景圖片

• 無法對(duì)懶加載的樣式做處理，需要初始化加載全局所有樣式

const ExtractTextPlugin = require('extract-text-webpack-plugin')

// 抽離css
 module: {
 loaders: [
      {//抽離css 通過link加載
        test: /\.css$/,
        loader: ExtractTextPlugin.extract({ 
        fallback: 'style-loader', 
        use: 'css-loader'
        })
      }
      ...
      
 plugins: [
    new ExtractTextPlugin({ 
    filename: 'css/[name].css'
    allChunks: true // 打包所有頁(yè)面css到同一個(gè)css 文件
    })
  ]

• 無法動(dòng)態(tài)修改背景圖片

方式三：編譯時(shí)多主題全量構(gòu)建

實(shí)現(xiàn)：

• 定義多套樣式

• 構(gòu)建時(shí)將多套樣式主題作為獨(dú)立構(gòu)建入口，構(gòu)建出主題靜態(tài)文件css文件

• 業(yè)務(wù)運(yùn)行時(shí)動(dòng)態(tài)加載不同的主題文件

優(yōu)點(diǎn)：

• 支持動(dòng)態(tài)切換主題

• 業(yè)務(wù)開發(fā)樣式分離

• 編譯時(shí)構(gòu)建性能較好 缺點(diǎn)：

• 構(gòu)建工具配置較為復(fù)雜，適用單入口應(yīng)用，對(duì)多入口的支持不友好

• 需要定義全局 less 文件，在入口引入

• 業(yè)務(wù)需要額外操作

配合 rel="alternate stylesheet" 可預(yù)加載備選主題樣式

方式四： 編譯時(shí)選擇性構(gòu)建

實(shí)現(xiàn)：

• 內(nèi)置多套皮膚

• 構(gòu)建時(shí)傳入?yún)?shù)，根據(jù)不同的構(gòu)建參數(shù)加載不同的主題樣式文件

優(yōu)點(diǎn)：

• 構(gòu)建工具配置較為簡(jiǎn)單，不需要業(yè)務(wù)做額外操作

• 多入口應(yīng)用支持度好

缺點(diǎn)：

• 不支持動(dòng)態(tài)切換

• 多個(gè)項(xiàng)目需要構(gòu)建多次，需要構(gòu)建系統(tǒng)支持

方式五：less動(dòng)態(tài)變量

實(shí)現(xiàn)：

• 修改構(gòu)建腳本，將所有頁(yè)面less文件抽到同一個(gè)文件中

• 不編譯less，頁(yè)面直接加載less文件

• 使用less.js 在客戶端編譯less 文件

less: {
    modifyVars: {},
    javascriptEnabled: true
   }

優(yōu)點(diǎn)：

• 支持動(dòng)態(tài)切換

• 支持動(dòng)態(tài)色值

缺點(diǎn)：

• 客戶端編譯較耗性能/耗時(shí)

• 需要額外加載less.js mini文件size: 131KB

方式六：css變量

實(shí)現(xiàn)：

在需要變化的css屬性定義變量

:root {
 --main-bg-color: pink;
}

body {
 background-color: var(--main-bg-color);
}

在運(yùn)行時(shí)動(dòng)態(tài)的修改變量

document.body.style.setProperty('--primary', '#7F583F');

優(yōu)點(diǎn)：

• 瀏覽器原生支持，無需額外操作

• 支持動(dòng)態(tài)色值

缺點(diǎn)：

• 低版本兼容性不好 ios Safari 9.3、 android 5、 chrome forAndroid 76

UC、QQ、Baidu 等國(guó)內(nèi)瀏覽器支持度較差

方式七： import動(dòng)態(tài)加載

實(shí)現(xiàn)：

• 業(yè)務(wù)中預(yù)定義多套主題

• 運(yùn)行時(shí)根據(jù)變量動(dòng)態(tài)加載對(duì)應(yīng)主題

if(a){
  import('./thems/a/base.less')
}else if(b){
   import('./thems/b/base.less')
}

優(yōu)點(diǎn)：

• 支持動(dòng)態(tài)切換

• 實(shí)現(xiàn)簡(jiǎn)單

缺點(diǎn)：

• 不支持動(dòng)態(tài)色值

• 需要全局定義多套樣式表

• 全局定義 class 無法定義變量在 vue style 中引用變量

方式	動(dòng)態(tài)切換	動(dòng)態(tài)色值	支持變量	實(shí)現(xiàn)復(fù)雜度	兼容性	性能	維護(hù)性
class切換方式	是	否	是	簡(jiǎn)單	良好	良好
ElementUI的實(shí)現(xiàn)	是	是	是	中等	良好	一般
編譯時(shí)多主題全量構(gòu)建	是	否	是	復(fù)雜	良好	一般
編譯時(shí)選擇性構(gòu)建	否	否	是	中等	良好	良好
less變量	是	是	否	復(fù)雜	良好	差
css變量	是	是	是	中等	差	良好
import動(dòng)態(tài)加載	是	否	否	簡(jiǎn)單	良好	良好

注：

• 動(dòng)態(tài)切換：是否支持在運(yùn)行時(shí)切換皮膚

• 動(dòng)態(tài)設(shè)置：是否支持在運(yùn)行時(shí)動(dòng)態(tài)設(shè)置皮膚顏色

• 支持變量：是否可以再全局定義變量 less 文件，然后在不同的頁(yè)面引用 less，依賴其中的變量，還是需要在全局 less 文件里面定義全局 class

• 實(shí)現(xiàn)復(fù)雜度： 需要修改的代碼量包括構(gòu)建工具和業(yè)務(wù)代碼

• 兼容性： 主流瀏覽器支持程度

• 性能：包括代碼的首屏加載的 size、切換的速度、切換的時(shí)候會(huì)不會(huì)有閃動(dòng)

以上是“vue+webpack更換主題的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前名稱：vue+webpack更換主題的方法有哪些-創(chuàng)新互聯(lián)
瀏覽地址：http://aaarwkj.com/article26/csoejg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、服務(wù)器托管、面包屑導(dǎo)航、品牌網(wǎng)站制作、企業(yè)建站、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)