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

2026-03-26 73 浏览 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)
}