【Vue.js】项目打包上传后,字体Not Found

个人的诗词网站前台页面采用单页设计,由Vue.js编写。

其中的字体库引入了开源的Font Awesome,不过项目打包上传至服务器后出现了字体找不到的错误?

1
❌ GET http://www.dragonflyxd.com/static/fonts/fontawesome-webfont.af7ae50.woff2

起初以为是资源的路径不对,后排查一番,路径没有任何错误。

以下就叙述如何解决Fonts Not Found的问题。

究其根源,原是url-loader做了手脚,它对文件大小做了限制。

需要修改的文件位于:./build/webpack.base.conf.js

1
2
3
4
5
6
7
8
9
10
# ./build/webpack.base.conf.js
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 80000, // 默认是10000
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}

上面是url-loader匹配的字体文件,而其对字体文件大小做了限制,limit默认值是10000

修改limit的值即可,直至超出字体文件的大小。