【未解决】elementUI中使用loading服务时，使用的小图标显示不了，只有一个小方框

问题遇到的现象和发生背景

上传时需要显示一个loading的加载状态图片。
本地跑代码时，loading的图片是正常显示的，但是build后图片显示不了，只有一个小框。

img


且控制台报错

img

问题相关代码，请勿粘贴截图

let loading = this.$loading({
lock: true,
text: this.$t('bbs_label_uploading'),
spinner: 'el-icon-loading'
})

运行结果及报错内容

build后线上看不见loading的图片，只显示一个小框

我的解答思路和尝试过的方法

在util.js中 添加过publicPath: '../../' 没有效果，且导致相关路径改变，直接报错
if (options.extract) {
return ExtractTextPlugin.extract('vue-style-loader', sourceLoader,{publicPath: '../../'})
} else {
return ['vue-style-loader', sourceLoader].join('!')
}

我想要达到的结果

需要显示loading对应的图片效果

img

是不是静态文件没打包进去，那个图标应该是个静态文件，看看是不是丢了

可能是这两个原因之一

  1. 没引入elemnt的css文件
    import 'element-ui/lib/theme-chalk/index.css';
  2. 全局设置了字体样式
    例如
  • {
    font-maily: xxxx;
    }

如有帮助，麻烦点个【采纳此答案】谢谢

你这个是打包了之后直接本地打开的index.html， publicPath 默认是 / 的， 直接打开会404

修改 vue.config.js 的 publicPath

module.exports = {
  publicPath: process.env.NODE_ENV === "development" ? "/" : "./", // 部署应用包时的基本 URL
}

publicPath