今天打開(kāi)自己做的element-ui的后臺(tái)管理頁(yè)面，發(fā)現(xiàn)element-ui的字體圖標(biāo)無(wú)法正常顯示了，顯示出來(lái)的都是小方塊
1.png
之前是以為element里面用了沒(méi)有的字體圖標(biāo)，重新寫(xiě)在安裝后發(fā)現(xiàn)問(wèn)題沒(méi)有解決。之后查看css代碼，偽元素是成功加載上去的，說(shuō)明導(dǎo)入沒(méi)有錯(cuò)誤，翻閱資料最后應(yīng)該確認(rèn)在element-ui的font字體文件，通過(guò)webpack打包之后出現(xiàn)的問(wèn)題
網(wǎng)上都說(shuō)要在loader內(nèi)更改
test: /\.(woff|eot|ttf|otf)(\?.*)?$/i,原本是woff2，但是看element-ui > lib > theme-chalk內(nèi)是沒(méi)有woff2文件的。
2.png
這里需要通過(guò)更改webpack的配置，來(lái)解決問(wèn)題。
因?yàn)槭褂玫腸li3的版本，需要在根目錄下添加
vue.config.js文件，這里還要使用，webpack-chain來(lái)進(jìn)行鏈?zhǔn)皆O(shè)置。之前一直搞不懂這個(gè)鏈?zhǔn)脚渲迷趺词褂?，之后結(jié)合了
vue inspect > webpack.test.js命令，可以生成一個(gè)普通的webpack配置文件，兩者結(jié)合起來(lái)看就簡(jiǎn)單很多了
module.exports = {
chainWebpack: config => {
const imagesRule = config.module.rule('images')
imagesRule.uses.clear()
// 刪除images的rule
imagesRule.use('file-loader')
.loader('url-loader')
.options({
limit: 10000,
// 設(shè)置圖片大小
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
})
const fontsRule = config.module.rule('fonts')
fontsRule.uses.clear()
fontsRule.test(/\.(woff|eot|ttf|otf)(\?.*)?$/i)
fontsRule.use('file-loader')
.loader('url-loader')
.options({
fallback: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
})
}
}
通過(guò)命令后就會(huì)在vue.config.js同級(jí)文件夾，生成一個(gè)webpack.test.js文件，上面的代碼轉(zhuǎn)換后，就是下面的內(nèi)容。
/* config.module.rule('images') */
{
test: /\.(png|jpe?g|gif|webp)(\?.*)?$/,
use: [
/* config.module.rule('images').use('file-loader') */
{
loader: 'url-loader',
options: {
limit: 10000,
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[hash:8].[ext]'
}
}
}
}
]
},
/* config.module.rule('fonts') */
{
test: /\.(woff|eot|ttf|otf)(\?.*)?$/i,
use: [
/* config.module.rule('fonts').use('file-loader') */
{
loader: 'url-loader',
options: {
fallback: {
loader: 'file-loader',
options: {
name: 'fonts/[name].[hash:8].[ext]'
}
}
}
}
]
},
這樣對(duì)比起來(lái)就很好理解了
- 首先要給需要設(shè)置的類(lèi)型一個(gè)變量，后面調(diào)用更方便
- 通過(guò)鏈?zhǔn)秸{(diào)用配置的方法，比如
test和use是兩個(gè)同級(jí)的，那么test就不能寫(xiě)在use下面，use下面的都是進(jìn)入了use內(nèi)部的配置 - 如果配置很多的話(huà)可用
end()來(lái)返回上一層，從use返回上一層后就可以繼續(xù)寫(xiě)test了
把這兩段寫(xiě)好之后，因?yàn)楦牧伺渲梦募浀靡匦?code>npm run serve，之后字體圖標(biāo)就能很好顯示了。自己一點(diǎn)個(gè)人理解，希望能幫到有需要的人
3.png
