【寫在前面】vue3在運行正常、build后在IDEA運行正常,但是當部署在服務器上運行發現樣式加載不出來,下面我們針對這些情況進行復現與解決。
一、問題分析
困擾我好久,當即百度原因,百度清一色下面三種情況:
1、nginx配置文件的問題
2、控制臺樣式404,文件沒找到【文件路徑錯誤】
3、樣式引入順序不對存在覆蓋
但是我的以上都不是,搞得我頭都大,我的居然是java配置攔截的問題;
二、問題解決(多方位解決)
1、nginx配置問題的解決方法是:
找到您服務器上nginx.conf文件,一般在/nginx/conf路徑下,編輯該文件,查看一下是否在http的方括號內是否有一下內容,沒有的話添加上,有的忽略
include mime.types;
default_type application/octet-stream;
這個也是會引發css樣式加載不了的狀況,添加后效果如下。
2、控制臺樣式引入404解決方法
頁面是空白,且控制臺加載的樣式css和js文件都是404狀態也,如下:
那么這種情況問題就出現在前端上了,切記排查你前端項目的vue..js文件,看看里面的變量是否寫成了’/’,而不是’./’,這里的·是很重要的,意味著表示相對路徑,要是沒有點的話就是絕對路徑(根目錄)虎撲跑步提示數據加載錯誤,所以會存在404的問題。修改后如下:
然后修改好后記得重新打包后上傳喲!
3、樣式文件引入位置先后的問題解決
當然這個是針對很多人說的的引入的問題,說是調整main.js文件引入的css樣式的先后順序,也就是在 App之前加引入,如下所示順序:
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
但是我自己測試不管在前在后都一樣的效果,所以我個人覺得這個作用沒啥用。
4、java配置文件攔截問題解決
之前一直把方向定位在nginx和及vue前端代碼上,卻忽略了java的攔截虎撲跑步提示數據加載錯誤,java應該在-mvc.xml文件設置放行文件,也就是mvc:標簽里面應該將css和image、js進行放行,具體根據你的配置來寫,我的如下:
<mvc:resources location="/static/css/" mapping="/static/css/**"/>
<mvc:resources location="/static/img/" mapping="/static/img/**"/>
<mvc:resources location="/static/js/" mapping="/static/js/**"/>
之前我以為沒有用,把它注釋了,導致自己花了好一段時間才定位出來,所以大家當出現css在頁面上能加載,但是頁面樣式錯亂的情況下,可以自己去想一想是不是java文件沒放行的原因,尤其是有些人會寫一些文件做權限控制。
三、搞定收工
最后再將包重新clean-重新打包后,上傳到服務器上面,然后再訪問您就會發現其實往往更多時候是自己忽略了一些細節,希望我寫的記錄的能給迷茫的您帶來一些幫助哈,喜歡的話可以收藏喲!
如果還沒解決您的問題歡迎留言,看到后博主會盡量回復解答,有其他特殊情況也會定期更新解決方案,期待您的來信與留言!!
【寫在最后】喜歡博主的話可以給個小愛心喲,我們一起努力,一起加油!!!歲月靜好,愿青春溫柔以待