如何解决vue项目使用font-awesome,build后路径的问题

发布时间:2021-07-21 10:32:31 作者:小新
来源:亿速云 阅读:154

这篇文章主要介绍如何解决vue项目使用font-awesome,build后路径的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

问题:

项目在本地run情况下显示正常,在build后font-awesome的css文件依赖的几个图标文件引用路径报错。

如何解决vue项目使用font-awesome,build后路径的问题

在webpack.base.conf.js中关于几个文件的配置如下:

{
 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 loader: 'url-loader',
 options: {
  limit: 10000,
  name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
  }
}

解决:

通过和网上其他大神的配置对比上发现,有些webpack.base.conf.js的配置如下:

{
 test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
 loader: 'url-loader'
}

将配置中option注释掉即可解决路径问题。

后续:

这个方式是个治标的方式,不是问题的关键,关键应该在脚手架的其他配置上。

以上是“如何解决vue项目使用font-awesome,build后路径的问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!

推荐阅读:
  1. Vue打包后访问静态资源路径问题
  2. 解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

vue font-awesome build

上一篇:如何解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

下一篇:PHP中的备忘录模式是干什么的

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》