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