vue專案打包後動態配置樣式(切換主題)

2021-10-05 20:27:57 字數 634 閱讀 4675

有時候專案需要多套主題,根據不同節日來切換不同的節日,網上有很多方法可以實現。這裡介紹vue打包後動態配置樣式。

在這個基礎上對配置檔案進行修改

首先現在public中建立乙個config.css樣式配置檔案,然後再index.html引入,內容:

/* 標題樣式配置 */

.configtitleclass

/*全域性主題配置*/

.themeclass

.themeclass::before

然後在配置檔案中加入樣式的配置變數,configtitleclass是類名,可自己修改。

titlestyle:"configtitleclass", //標題樣式class名,可新增多個

themestyle:"themeclass" //標題樣式class名,可新增多個

然後再頁面中加入配置的樣式class,這裡最好是在專案搭建初就定義好class名,然後在需要配置的頁面中都加入這個配置。

這裡的$configstyle是在main.js中根據配置檔案中的樣式配置定義的全域性變數。

然後build,試執行,修改配置樣式檔案,完美執行。

vue專案打包後多行省略樣式混亂

在實現多行省略時,可以用以下方式來實現 overflow hidden text overflow ellipsis display webkit box webkit line clamp 2 webkit box orient vertical 複製 vue專案中採用這種寫法後,在本地並沒有問題...

vue專案,本地執行和build打包後樣式不同

最近在打包專案上傳到伺服器時,總是會出現奇奇怪怪的樣式,譬如 我本地用el menu做的二級選單分類,在本地可以正常顯示,打包上傳至伺服器出現異常,如下圖 本地正常顯示 打包後異常顯示 解決方案 檢視通過控制台檢視本地渲染後的樣式和伺服器渲染後的樣式,發現之前其他檔案中的el menu的樣式是全域性...

vue專案打包後跨域

關於vue的跨域配置,有開發環境的跨域和生產環境的跨域,詳見我的另一篇部落格 對於上篇文章的生產環境的跨域位址配置,是將所有介面的訪問都指向同乙個伺服器,而對於前後端未完全分離的專案,如果有某個介面需要訪問非當前專案的另一台伺服器的話,就需要對這個介面單獨進行處理了,針對這個問題,我重新梳理了一下關...