web部署到nginx以后js,css等靜態(tài)文件加載不正常的解決過程
更新時(shí)間：2025年09月10日 09:51:36 作者：JackRenEngineer
在Ubuntu中配置Web頁面時(shí),JS和CSS文件雖可獲取但加載失敗,可能因路徑錯(cuò)誤、服務(wù)器配置不當(dāng)、權(quán)限限制或緩存問題導(dǎo)致頁面布局異常,需檢查文件路徑、服務(wù)器設(shè)置、MIME類型及瀏覽器控制臺(tái)錯(cuò)誤信息以排查原因
web部署到nginx以后js,css等靜態(tài)文件加載不正常
在ubuntu中配置web頁面時(shí)候，可以獲取js和css，但是無法加載這些，導(dǎo)致頁面布局失效。
解決方法
include /etc/nginx/mime.types; 在http{}內(nèi)。
http塊：可以嵌套多個(gè)server，配置代理，緩存，日志定義等絕大多數(shù)功能和第三方模塊的配置。
如文件引入，mime-type定義，日志自定義，是否使用sendfile傳輸文件，連接超時(shí)時(shí)間，單連接請(qǐng)求數(shù)等。
什么是MIME-TYPE？
在瀏覽器中顯示的內(nèi)容有 HTML、有 XML、有 GIF、還有 Flash ...那么，瀏覽器是如何區(qū)分它們，什么內(nèi)容用什么形式來顯示呢？
答案是 MIME Type，也就是該資源的媒體類型。
- 當(dāng)web服務(wù)器收到靜態(tài)的資源文件請(qǐng)求時(shí)，依據(jù)請(qǐng)求文件的后綴名在服務(wù)器的MIME配置文件中找到對(duì)應(yīng)的MIME Type，
- 再根據(jù)MIME Type設(shè)置HTTP Response的Content-Type，然后瀏覽器根據(jù)Content-Type的值處理文件。
- 當(dāng)我們?cè)谂渲肗ginx的時(shí)候，缺少mime.types，自然就會(huì)出現(xiàn)我們js,css等靜態(tài)問題加載不正常的問題。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Nginx實(shí)現(xiàn)404錯(cuò)誤自動(dòng)跳轉(zhuǎn)到首頁的配置過程
當(dāng)用戶在訪問網(wǎng)站的過程中遇到404錯(cuò)誤時(shí),通常情況下應(yīng)該顯示一個(gè)友好的錯(cuò)誤頁面,而不是僅僅顯示一個(gè)簡(jiǎn)單的錯(cuò)誤提示,在Nginx中,可以通過配置來實(shí)現(xiàn)404錯(cuò)誤自動(dòng)跳轉(zhuǎn)到首頁的功能,下面將詳細(xì)介紹如何進(jìn)行配置,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了nginx熱部署的原理分析:nginx -s reload,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-06-06
nginx作為一款高性能的服務(wù)器,用途很多,下面這篇文章主要給大家介紹了Nginx多種匹配方式的相關(guān)資料,文中通過圖文介紹的介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
這篇文章主要介紹了nginx安裝第三方模塊的方法,包含在未安裝nginx的情況下安裝nginx第三方模塊和在已安裝nginx情況下安裝nginx第三方模塊,需要的朋友可以參考下2014-06-06
這篇文章主要介紹了Nginx配置支持ThinkPHP的PATH_INFO,本文在Ubuntu的開發(fā)環(huán)境加配置成功,需要的朋友可以參考下2015-07-07
nginx代理服務(wù)器配置雙向證書驗(yàn)證的方法
今天小編就為大家分享一篇關(guān)于nginx代理服務(wù)器配置雙向證書驗(yàn)證的方法，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧2019-02-02
nginx proxy_set_header設(shè)置自定義header的實(shí)現(xiàn)步驟
在Nginx中,使用?proxy_set_header指令可以自定義header并在反向代理時(shí)傳遞到后端服務(wù)器,本文就來詳細(xì)的介紹一下,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
這篇文章主要介紹了nginx部署.net core站點(diǎn)的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-07-07
這篇文章主要介紹了詳解通過Nginx部署Django（基于ubuntu)，Django的部署可以有很多方式，采用nginx+uwsgi的方式是其中比較常見的一種方式，有興趣的可以了解一下。2017-01-01
windows下RunHiddenConsole 啟動(dòng) nginx與php（RunHiddenConsole下載）
這篇文章主要介紹了RunHiddenConsole 啟動(dòng) nginx與php的相關(guān)資料,希望通過本文能幫助到大家，讓大家學(xué)會(huì)使用RunHiddenConsole，需要的朋友可以參考下2017-10-10