今天打开自己做的element-ui的后台管理页面，发现element-ui的字体图标无法正常显示了，显示出来的都是小方块
1.png
之前是以为element里面用了没有的字体图标，重新写在安装后发现问题没有解决。之后查看css代码，伪元素是成功加载上去的，说明导入没有错误，翻阅资料最后应该确认在element-ui的font字体文件，通过webpack打包之后出现的问题
网上都说要在loader内更改
test: /\.(woff|eot|ttf|otf)(\?.*)?$/i,原本是woff2，但是看element-ui > lib > theme-chalk内是没有woff2文件的。
2.png
这里需要通过更改webpack的配置，来解决问题。
因为使用的cli3的版本，需要在根目录下添加
vue.config.js文件，这里还要使用，webpack-chain来进行链式设置。之前一直搞不懂这个链式配置怎么使用，之后结合了
vue inspect > webpack.test.js命令，可以生成一个普通的webpack配置文件，两者结合起来看就简单很多了
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,
// 设置图片大小
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]'
}
}
})
}
}
通过命令后就会在vue.config.js同级文件夹，生成一个webpack.test.js文件，上面的代码转换后，就是下面的内容。
/* 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]'
}
}
}
}
]
},
这样对比起来就很好理解了
- 首先要给需要设置的类型一个变量，后面调用更方便
- 通过链式调用配置的方法，比如
test和use是两个同级的，那么test就不能写在use下面，use下面的都是进入了use内部的配置 - 如果配置很多的话可用
end()来返回上一层，从use返回上一层后就可以继续写test了
把这两段写好之后，因为更改了配置文件，记得要重新npm run serve，之后字体图标就能很好显示了。自己一点个人理解，希望能帮到有需要的人
3.png
