利用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