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

发布于 2019-10-08 13:49:22 字数 926 浏览 3146 评论 0

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

比如说 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 技术交流群。

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

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

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

0 文章
0 评论
84960 人气
更多

推荐作者

沧笙踏歌

文章 0 评论 0

山田美奈子

文章 0 评论 0

佚名

文章 0 评论 0

岁月无声

文章 0 评论 0

暗藏城府

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文