快捷導(dǎo)航

vue項目中icon亂碼的問題及解決

更新時間：2022年12月13日 14:32:27 作者：OOOOOOh~

這篇文章主要介紹了vue項目中icon亂碼的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

問題描述

最近發(fā)現(xiàn)項目在測試環(huán)境下icon偶爾會出現(xiàn)亂碼的情況，我自己本地一直沒能復(fù)現(xiàn)，在測試環(huán)境復(fù)現(xiàn)的話就需要打開控制臺，然后按鍵刷新，一次不行就多刷新幾次，就可以復(fù)現(xiàn)這個問題。

原因分析

這個問題可能是因為項目中有用到element-ui庫，而項目中安裝的sass和element-ui源碼中的sass（node-sass）安裝版本不一致造成的。

項目中的sass

具體：

一般使用不會出現(xiàn)這個問題，因為一般引入的是element-ui的css文件，問題出在于為了主題色變化啊，需要用到scss變量引入了scss文件。

@import “~element-ui/packages/theme-chalk/src/index”;

而dart-sass在編譯element-ui里icon偽元素的content unicode編碼時會轉(zhuǎn)換成對應(yīng)unicode明文，所以通過偽元素來展示的圖標如el-icon-arrow:before{ content: “\e6df”}，編譯之后就變成了el-icon-arrow:before{ content: “”}，“”便是一個雙字節(jié)字符，導(dǎo)致出現(xiàn)亂碼。

解決方法

直接uninstall項目中的sass，然后安裝node-sass（因為是公司項目，不好做修改）

node-sass 是用 node(調(diào)用 cpp 編寫的 libsass)來編譯 sass；node-sass是自動編譯實時的
dart-sass 是用 drat VM 來編譯 sass；dart-sass需要保存后才會生效
node-sass 因為國情問題經(jīng)常裝不上
sass官方已經(jīng)將dart-sass作為未來主要的的開發(fā)方向了，有任何新功能它會優(yōu)先支持

和后端商量下，讓css資源請求的響應(yīng)頭的Content-Type增加"charset=utf-8"聲明。（沒做嘗試）

看到大佬寫的一個方法 https://github.com/styzhang/css-unicode-loader

安裝大佬寫的loader

yarn add css-unicode-loader --dev

對應(yīng)的配置

if use vue-cli 4+ and scss(sass), add the loader in the vue config file .
// vue.config.js
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") });
? ? ? ? });
? ? ? });
? ? }
}

vue.config.js具體配置

const path = require('path');
const webpack = require('webpack');
const buildDate = JSON.stringify(new Date().toLocaleString());
let devServer = null;

try {
? ?devServer = require('./devServer');
}
catch (e) {
? ?devServer = {};
}

function resolve(dir) {
? ?return path.join(__dirname, dir);
}

// 將之前的plugins提出來封裝成一個函數(shù)
function getPlugins() {
? ?const plugins = [
? ? ? // Ignore all locale files of moment.js
? ? ? new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
? ? ? new webpack.DefinePlugin({
? ? ? ? ?APP_VERSION: `"${require('./package.json').version}"`,
? ? ? ? ?BUILD_DATE: buildDate,
? ? ? }),
? ?];

? ?return plugins;
}

const vueConfig = {
? // configureWebpack: {
? // ? ?// webpack plugins
? // ? ?plugins: [
? // ? ? ? // Ignore all locale files of moment.js
? // ? ? ? new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
? // ? ? ? new webpack.DefinePlugin({
? // ? ? ? ? ?APP_VERSION: `"${require('./package.json').version}"`,
? // ? ? ? ? ?BUILD_DATE: buildDate,
? // ? ? ? }),
? // ? ?],
? // },

? ?configureWebpack: config => {
? ? ? config.module.rules.filter(rule => {
? ? ? ? ?return rule.test.toString().indexOf('scss') !== -1;
? ? ? })
? ? ? ? ?.forEach(rule => {
? ? ? ? ? ? rule.oneOf.forEach(oneOfRule => {
? ? ? ? ? ? ? ?oneOfRule.use.splice(oneOfRule.use.indexOf(require.resolve('sass-loader')), 0,
? ? ? ? ? ? ? ? ? { loader: require.resolve('css-unicode-loader') });
? ? ? ? ? ? });
? ? ? ? ?});
?? ? ?// 獲取plugins函數(shù)的內(nèi)容
? ? ? const plugins = getPlugins();
? ? ? //這里要返回一個對象
? ? ? return { plugins };
? ?},

? ?chainWebpack: (config) => {
? ? ? config.plugin('html')
? ? ? ? ?.tap(args => {
? ? ? ? ? ? args[0].title = process.env.VUE_APP_TITLE;
? ? ? ? ? ? return args;
? ? ? ? ?});
? ? ? config.module
? ? ? ? ?.rule('svg')
? ? ? ? ?.exclude.add(resolve('./src/assets/icons'))
? ? ? ? ?.end();
? ? ? config.module
? ? ? ? ?.rule('icons')
? ? ? ? ?.test(/\.svg$/)
? ? ? ? ?.include.add(resolve('./src/assets/icons'))
? ? ? ? ?.end()
? ? ? ? ?.use('svg-sprite-loader')
? ? ? ? ?.loader('svg-sprite-loader');
? ?},

? ?css: {
? ? ? loaderOptions: {
? ? ? ? ?less: {
? ? ? ? ? ? // DO NOT REMOVE THIS LINE
? ? ? ? ? ? javascriptEnabled: true,
? ? ? ? ?},
? ? ? },
? ?},

? ?devServer,

? ?// disable source map in production
? ?productionSourceMap: false,
? ?lintOnSave: true,
? ?// babel-loader no-ignore node_modules/*
? ?transpileDependencies: [],
};

module.exports = vueConfig;