vue-cli+webpack项目打包到服务器后,ttf字体找不到的解决操作

 更新时间:2020年08月28日 08:58:26   作者:cfangling  
这篇文章主要介绍了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字体找不到的解决操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue组件样式作用域问题:原因与解决方式

    Vue组件样式作用域问题:原因与解决方式

    本文将深入探讨 Vue 组件样式作用域的常见问题,并提供多种解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-03-03
  • 使用vue2.0创建的项目的步骤方法

    使用vue2.0创建的项目的步骤方法

    这篇文章主要介绍了使用vue2.0创建的项目的步骤方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue小白入门教程

    vue小白入门教程

    vue是一套用于构建用户界面的渐进式框架,本文通过实例给大家介绍了vue入门教程适用小白初学者,非常不错,具有参考借鉴价值,需要的朋友参考下吧
    2018-04-04
  • Vue2.0 多 Tab切换组件的封装实例

    Vue2.0 多 Tab切换组件的封装实例

    本篇文章主要介绍了Vue2.0 多 Tab切换组件的封装实例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • vue 数据双向绑定的实现方法

    vue 数据双向绑定的实现方法

    这篇文章主要介绍了vue 数据双向绑定的实现方法,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • vue-prop父组件向子组件进行传值的方法

    vue-prop父组件向子组件进行传值的方法

    下面小编就为大家分享一篇vue-prop父组件向子组件进行传值的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue scss后缀文件background-image路径错误的解决

    vue scss后缀文件background-image路径错误的解决

    这篇文章主要介绍了vue scss后缀文件background-image路径错误的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • 浅谈Vue的双向绑定和单向数据流冲突吗

    浅谈Vue的双向绑定和单向数据流冲突吗

    单项数据流和双向数据绑定的概念,这两种不是相互冲突的吗?即然能用v-model双向数据绑定,不应该就是双向数据流了吗?本文就详细的介绍一下
    2022-04-04
  • Vue生命周期实例分析总结

    Vue生命周期实例分析总结

    Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue()开始就是vue生命周期的开始。Vue实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom->渲染、更新->渲染、卸载等⼀系列过程,称这是Vue的⽣命周期
    2022-10-10
  • vue 之 css module的使用方法

    vue 之 css module的使用方法

    这篇文章主要介绍了vue 之 css module的使用方法,css module目的为所有类名重新生成类名,有效避开了css权重和类名重复的问题,非常具有实用价值,需要的朋友可以参考下
    2018-12-12

最新评论