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.js数据绑定之data属性

    Vue.js数据绑定之data属性

    这篇文章主要为大家详细介绍了Vue.js数据绑定之data属性,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-07-07
  • vue+tp5实现简单登录功能

    vue+tp5实现简单登录功能

    这篇文章主要为大家详细介绍了vue+tp5实现简单登录功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 详解vue3中渲染函数的非兼容变更

    详解vue3中渲染函数的非兼容变更

    这篇文章主要介绍了详解vue3中渲染函数的非兼容变更,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-03-03
  • Vite多环境配置项目高定制化能力详解

    Vite多环境配置项目高定制化能力详解

    这篇文章主要为大家介绍了Vite多环境配置项目高定制化能力详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue.js简单配置axios的方法详解

    vue.js简单配置axios的方法详解

    axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,下面这篇文章主要给大家介绍了关于vue.js简单配置axios的相关资料,需要的朋友们可以参考借鉴,需要的朋友们下面来一起学习学习吧。
    2017-12-12
  • vue使用keep-alive后清除缓存的方法

    vue使用keep-alive后清除缓存的方法

    这篇文章主要给大家介绍了关于vue使用keep-alive后清除缓存的相关资料,这个问题在我们日常工作中经常会用到,本文通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-08-08
  • vue2之jessibuca视频插件使用教程详细讲解

    vue2之jessibuca视频插件使用教程详细讲解

    Jessibuca进行直播流播放,为用户带来便捷、高效的视频观看体验,下面这篇文章主要给大家介绍了关于vue2之jessibuca视频插件使用的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • vue.js实现点击后动态添加class及删除同级class的实现代码

    vue.js实现点击后动态添加class及删除同级class的实现代码

    这篇文章主要介绍了vue.js实现点击后动态添加class及删除同级class的相关资料,需要的朋友可以参考下
    2018-04-04
  • Vue监听数组变化源码解析

    Vue监听数组变化源码解析

    这篇文章主要为大家详细解析了Vue监听数组变化的源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • Vue 换肤的示例实践

    Vue 换肤的示例实践

    本篇文章主要介绍了Vue 换肤的示例实践,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

最新评论