这篇文章主要介绍了vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
更改 build/utils.js 文件中 ExtractTextPlugin 插件的options 配置：
if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../<b style="color:transparent">本文来源gao@!dai!ma.com搞$$代^@码网*</b>', // 注意配置这一部分，根据目录结构自由调整 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字体找不到的解决操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
转载请注明原文链接：vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作
