vite打包部署圖標(biāo)偶爾亂碼的問題及解決過程
vite+vue3項(xiàng)目打包后，生產(chǎn)環(huán)境出現(xiàn)自定義圖標(biāo)偶爾亂碼的問題，網(wǎng)上收集了一些方法：
1、修改sass版本至1.39.0，vue.config.js中增加
css: {
preprocessorOptions: {
sass: {
sassOptions: {
outputStyle: 'expanded',
},
},
},
},結(jié)果：不確定是不是只支持vue2，在vite.config.js中加了沒效果
2、改為使用node-sass
結(jié)果：node-sass安裝比較麻煩，不采用
3、研究了一下vite.config.js的各個(gè)配置項(xiàng)
官方文檔：Vite官方中文文檔
在文檔中找到了構(gòu)建選項(xiàng)中的cssMinify屬性，設(shè)為false即可不對(duì)css進(jìn)行壓縮
// vite.config.js
export default defineConfig({
build: {
cssMinify: false,
}
})結(jié)果：cssMinify設(shè)置為true時(shí)，圖標(biāo)會(huì)變成不知名符號(hào)：
cssMinify設(shè)置為false時(shí)，圖標(biāo)是正常的unicode編碼：
因?yàn)樵O(shè)置了css不進(jìn)行壓縮，為了避免打包文件過大，記錄了兩種情況下的css打包大?。?/p>
cssMinify設(shè)置為true時(shí)：
cssMinify設(shè)置為false時(shí)：
對(duì)比可以發(fā)現(xiàn)，打包大小差距不是很大，因此使用了此方案。
ps：如果設(shè)置的是minify:false,則會(huì)將js和css都不進(jìn)行壓縮，js不壓縮將會(huì)增加比較多的打包體積
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁面的例子
今天小編就為大家分享一篇vue設(shè)置導(dǎo)航欄、側(cè)邊欄為公共頁面的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決vue.js出現(xiàn)Vue.js not detected錯(cuò)誤的問題
這篇文章主要介紹了解決vue.js出現(xiàn)Vue.js not detected錯(cuò)誤的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue2+elementUI實(shí)現(xiàn)下拉樹形多選框效果實(shí)例
這篇文章主要給大家介紹了關(guān)于vue2+elementUI實(shí)現(xiàn)下拉樹形多選框效果的相關(guān)資料,這是最近的工作中遇到的一個(gè)需求,對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
vue3?element?plus按需引入最優(yōu)雅的用法實(shí)例
這篇文章主要給大家介紹了關(guān)于vue3?element?plus按需引入最優(yōu)雅的用法,以及關(guān)于Element-plus按需引入的一些坑,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-03-03
這篇文章主要為大家介紹了Vue之過濾器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助,希望能夠給你帶來幫助2021-11-11
Vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)動(dòng)態(tài)控制表格列的顯示和隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue3中如何通過ref和$parent結(jié)合defineExpose實(shí)現(xiàn)父子組件之間的通信
這篇文章主要介紹了vue3中通過ref和$parent結(jié)合defineExpose實(shí)現(xiàn)父子組件之間的通信,Vue3中通過ref和$parent的結(jié)合使用，及defineExpose的方法，可以非常便捷地實(shí)現(xiàn)父子組件之間的通信，需要的朋友可以參考下2023-07-07
這篇文章主要介紹了Vue批量圖片顯示時(shí)遇到的路徑被解析問題，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
vue.js 實(shí)現(xiàn)評(píng)價(jià)五角星組件的實(shí)例代碼
這篇文章主要介紹了vue.js 實(shí)現(xiàn)評(píng)價(jià)五角星組件的實(shí)例代碼,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
這篇文章主要介紹了Vue中使用插槽（slot）、聚類插槽，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04