vue+webpack+element打包上传至oss利用域名打开之后element-icons图标无法显示

喜欢ヅ旅行 2021-11-26 15:12 207阅读 0赞

利用oss生成的index.html的url地址打开图标显示没有问题，但是直接通过域名访问就无法显示图标（静态资源地址通过nginx配置转发，可以直接通过域名访问）。

由于在打包之后的css文件中对于element-icons图标的引入使用的是相对路径，使用域名打开时由于域名不为项目根目录所以报错404无法找到引入的图标文件，但是该图标文件是由打包自动生成，不为在项目中直接引入的图标库，反而是在项目中直接引入的图片等静态资源可以正常显示，所以考虑是否为打包配置问题，但是由于该项目之前已经打包配置过，显示一切正常，修改一些功能后重新打包却无法找到图标文件。。。。。。

解决：

1.可直接修改打包生成的css文件，将其中对于图标库的引入改为绝对路径引用上传至oss。但该方法太麻烦，每次打包都得要改。

2.修改build/utils.js文件vue-style-loader的publicPath路径，改为绝对路径的前缀，即static/fonts前的路径，因为css中引入路径为static/fonts/....。但该方法是否会对其它样式引入造成影响暂时还未发现。

3.直接根据未找到路径提示在oss的相应文件夹下添加

虽然以上方法能暂时解决显示问题，但是还是没有找到关键原因。

直接打开dist不显示element图标参考：[https://www.cnblogs.com/yjiangling/p/12922314.html][https_www.cnblogs.com_yjiangling_p_12922314.html]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pqeTgwNDA_size_16_color_FFFFFF_t_70][]

[https_www.cnblogs.com_yjiangling_p_12922314.html]: https://www.cnblogs.com/yjiangling/p/12922314.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2pqeTgwNDA_size_16_color_FFFFFF_t_70]: /images/20211126/201948ac07f047c99ae7559884bc2fc8.png