vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
更改build/utils.js文件中ExtractTextPlugin插件的options配置：
if(options.extract){
returnExtractTextPlugin.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字体找不到的解决操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。