線上環(huán)境偶爾會(huì)復(fù)現(xiàn)，
具體：
一般使用不會(huì)出現(xiàn)這個(gè)問(wèn)題，因?yàn)橐话阋氲氖莈lement-ui的css文件，問(wèn)題出在于為了主題色變化啊，需要用到scss變量引入了scss文件。
@import “~element-ui/packages/theme-chalk/src/index”;
而dart-sass在編譯element-ui里icon偽元素的content unicode編碼時(shí)會(huì)轉(zhuǎn)換成對(duì)應(yīng)unicode明文，所以通過(guò)偽元素來(lái)展示的圖標(biāo)如el-icon-arrow:before{ content: “\e6df”}，編譯之后就變成了el-icon-arrow:before{ content: “”}，“”便是一個(gè)雙字節(jié)字符，導(dǎo)致出現(xiàn)亂碼。
解決辦法
1、dart-sass替換成node-sass
2、使用dart-sass，結(jié)合使用npm庫(kù)的：
https://github.com/styzhang/css-unicode-loader
具體方式：
1、yarn add css-unicode-loader --dev
2、vue.config.js配置文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-415750.html
module.exports = {
configureWebpack: config => {
const sassLoader = require.resolve('sass-loader');
config.module.rules.filter(rule => {
return rule.test.toString().indexOf("scss") !== -1;
})
.forEach(rule => {
rule.oneOf.forEach(oneOfRule => {
const sassLoaderIndex = oneOfRule.use.findIndex(item => item.loader === sassLoader);
oneOfRule.use.splice(sassLoaderIndex, 0,
{ loader: require.resolve("css-unicode-loader") });
});
});
}
//下面的css配置可以無(wú)
css: {
loaderOptions: {
sass: {
sassOptions: {
javascriptEnabled: true
}
}
}
}
}
完成后執(zhí)行打包命令，打包文件dist/css/app.xxxx,
查看是否是icon是否正常編碼，下面展示為正常，不正常–下面圈起來(lái)的就是空的或者亂碼
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-415750.html
到了這里，關(guān)于vue項(xiàng)目打包上線element-ui的icon偶爾亂碼問(wèn)題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
