更改构建/跑龙套。js文件中ExtractTextPlugin插件的选择配置:
如果(options.extract) {
返回ExtractTextPlugin.extract ({
用途:装载机、
publicPath:“. ./. ./,//注意配置这一部分,根据目录结构自由调整
回退:“vue-style-loader”
})
其他}{
返回(“vue-style-loader”) .concat(加载器)
}
<强> webpack打包运行vue项目后找不到.ttf及.woff文件,或者路径报错
webpack.base。配置文件中,有的人可能在utils.js中
修改前:
{
测试:/\ . css/美元,
用途:ExtractTextPlugin.extract ({
用途:[' css-loader& # 63;减少',' autoprefixer-loader '],
回退:“style-loader”
})
},
{
测试:/\ .less/美元,
用途:ExtractTextPlugin.extract ({
用途:[css-loader& # 63;最小化,‘autoprefixer-loader’,‘less-loader’),
回退:“style-loader”
}),
},
修改后:
{
测试:/\ . css/美元,
用途:ExtractTextPlugin.extract ({
用途:[' css-loader& # 63;减少',' autoprefixer-loader '],
publicPath:“. ./. ./?
回退:“style-loader”
})
},
{
测试:/\ .less/美元,
用途:ExtractTextPlugin.extract ({
用途:[css-loader& # 63;最小化,‘autoprefixer-loader’,‘less-loader’),
publicPath:“. ./. ./?
回退:“style-loader”
}),
},
{
测试:/\。(woff2& # 63; |测试结束| ttf |传递)(\ & # 63;。*)& # 63;美元/,
装载机:“url-loader”,
选择:{
限制:10000
名称:utils.assetsPath(“字体/[名字]。[散列:7]。[ext]”)
}
}
针对ttf woff结/尾的文件使用url-loader加载的,要寻找到加载样式的加载程序改变打包路径。
就是再加载css的时候,将publicPath路径更改为“. ./. ./?也根据自己的目录结构自定义。这样打包后的项目才能找到相对应的应用路径,为什么要这样改呢,是因为我们的路径要按照打包后的层级结构去找,不是按原本项目本身,还有一点相对路径有时候找不到,所以才要改成这种绝对路径,在静态下再去寻找次。
以上这篇vue-cli + webpack项目打包到服务器后,ttf字体找不到的解决操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
