vue+webpack+element打包上傳至oss利用域名打開之後element-icons圖標無法顯示

利用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/....。但該方法是否會對其它樣式引入造成影響暫時還未發現。

雖然以上方法能暫時解決顯示問題,但是還是沒有找到關鍵原因。

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章