首页
话题
消息
手册
我的

解决 Vue 打包后 element-ui 图标字体不显示问题

发布于 2019-10-08 字数 1086 浏览 917 评论 0

在开发环境下,我们访问项目一般都是 127.0.0.1:8080,很多资源的查找都是从根目录下开始的,但是如果是打包成静态文件,放到域名的二级、三级目录,有些资源就找不到了。

解决 Vue 打包后 element-ui 图标字体不显示问题

比如说 element-ui 框架在打包后,字体图标就加载不出来,通过查看网络请求发现,他是从 CSS 所在的目录往下找,而不是从项目根目录往下找。

解决方法也很简单,在 build/utils.js 文件里面找到:

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

在 fallback 后面添加参数:

publicPath: '../../'

最终得到的代码:

if (options.extract) {
  return ExtractTextPlugin.extract({
    use: loaders,
    fallback: 'vue-style-loader',
    publicPath: '../../'
  })
} else {
  return ['vue-style-loader'].concat(loaders)
}

如果你对这篇文章有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助。

扫码二维码加入Web技术交流群

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!