vue-cli+webpack项目打包到服务器后,ttf字体找不到的
编程学习 2021-07-04 14:06www.dzhlxh.cn编程入门
这篇文章主要介绍了vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随长沙网络推广过来看看吧
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：
if (options.extract) {
return ExtractTextPlugin.extract({
use: loaders,
publicPath: '../../', // 注意配置这一部分，根据目录结构自由调整
fallback: 'vue-style-loader'
})
} else {
return ['vue-style-loader'].concat(loaders)
}
补充知识：webpack打包运行vue项目后找不到.ttf及.woff文件，或者路径报错
webpack.base.config 文件中 ,有的人可能在utils.js中
修改前：
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘, ‘autoprefixer-loader‘],
fallback: ‘style-loader‘
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘,‘autoprefixer-loader‘, ‘less-loader‘],
fallback: ‘style-loader‘
}),
},
修改后：
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘, ‘autoprefixer-loader‘],
publicPath:‘../../‘,
fallback: ‘style-loader‘
})
},
{
test: /\.less$/,
use: ExtractTextPlugin.extract({
use: [‘css-loader?minimize‘,‘autoprefixer-loader‘, ‘less-loader‘],
publicPath:‘../../‘,
fallback: ‘style-loader‘
}),
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
}
}
针对ttf/woff结尾的文件使用url-loader加载的，要寻找到加载样式的loader改变打包路径。
就是再加载css的时候，将publicPath路径更改为“../../”,也根据自己的目录结构自定义。这样打包后的项目才能找到相对应的应用路径,为什么要这样改呢，是因为我们的路径要按照打包后的层级结构去找，不是按原本项目本身，还有一点相对路径有时候找不到，所以才要改成这种绝对路径，在static下再去寻找次。
以上这篇vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作就是长沙网络推广分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持狼蚁SEO。