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

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

发布于 2019-10-08 字数 1088 浏览 2662 评论 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)
}

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

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

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2891 文章
评论
84935 人气
更多

推荐作者

伊面

文章 0 评论

白况

文章 0 评论

七禾

文章 0 评论

亢潮

文章 0 评论

悲念泪

文章 0 评论