web部署到nginx以后js,css等靜態(tài)文件加載不正常的解決過程
更新時間：2025年09月10日 09:51:36 作者：JackRenEngineer
在Ubuntu中配置Web頁面時,JS和CSS文件雖可獲取但加載失敗,可能因路徑錯誤、服務(wù)器配置不當、權(quán)限限制或緩存問題導(dǎo)致頁面布局異常,需檢查文件路徑、服務(wù)器設(shè)置、MIME類型及瀏覽器控制臺錯誤信息以排查原因
web部署到nginx以后js,css等靜態(tài)文件加載不正常
在ubuntu中配置web頁面時候，可以獲取js和css，但是無法加載這些，導(dǎo)致頁面布局失效。
解決方法
include /etc/nginx/mime.types; 在http{}內(nèi)。
http塊：可以嵌套多個server，配置代理，緩存，日志定義等絕大多數(shù)功能和第三方模塊的配置。
如文件引入，mime-type定義，日志自定義，是否使用sendfile傳輸文件，連接超時時間，單連接請求數(shù)等。
什么是MIME-TYPE？
在瀏覽器中顯示的內(nèi)容有 HTML、有 XML、有 GIF、還有 Flash ...那么，瀏覽器是如何區(qū)分它們，什么內(nèi)容用什么形式來顯示呢？
答案是 MIME Type，也就是該資源的媒體類型。
- 當web服務(wù)器收到靜態(tài)的資源文件請求時，依據(jù)請求文件的后綴名在服務(wù)器的MIME配置文件中找到對應(yīng)的MIME Type，
- 再根據(jù)MIME Type設(shè)置HTTP Response的Content-Type，然后瀏覽器根據(jù)Content-Type的值處理文件。
- 當我們在配置Nginx的時候，缺少mime.types，自然就會出現(xiàn)我們js,css等靜態(tài)問題加載不正常的問題。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
if指令該指令用來支持條件判斷,并根據(jù)條件判斷結(jié)果選擇不同的Nginx配置,本文主要介紹了nginx if 指令的具體使用,具有一定的參考價值,感興趣的可以了解一下2024-05-05
這篇文章主要為大家詳細介紹了Nginx實現(xiàn)分端口部署兩個或多個項目的相關(guān)教程,其中包含了反向代理配置,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
Nginx實現(xiàn)404錯誤自動跳轉(zhuǎn)到首頁的配置過程
當用戶在訪問網(wǎng)站的過程中遇到404錯誤時,通常情況下應(yīng)該顯示一個友好的錯誤頁面,而不是僅僅顯示一個簡單的錯誤提示,在Nginx中,可以通過配置來實現(xiàn)404錯誤自動跳轉(zhuǎn)到首頁的功能,下面將詳細介紹如何進行配置,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Nginx Rewrite模塊應(yīng)用的幾種場景，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
內(nèi)網(wǎng)環(huán)境nginx配置https訪問的過程詳解
這篇文章主要介紹了內(nèi)網(wǎng)環(huán)境nginx配置https訪問,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
這篇文章主要介紹了Nginx域名轉(zhuǎn)發(fā)使用場景代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-09-09
在Nginx配置中,root和alias都是用于指定請求對應(yīng)的文件系統(tǒng)路徑的指令,但它們的工作方式有顯著區(qū)別,這篇文章主要介紹了nginx中指令root與alias的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2025-11-11
這篇文章主要為大家介紹了Nginx如何代理UDP連接的實現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
文章詳細介紹了如何在同一端口下部署PC端和App端項目,包括Nginx配置、前端打包配置、manifest.json配置以及針對Vue3+vite項目的特殊配置,通過示例項目A和項目B,展示了如何修改Vite配置文件、調(diào)整路由配置,并通過Nginx進行關(guān)鍵配置2026-01-01
Nginx?504?Gateway?Time-out的兩種最新解決方案
大家在訪問網(wǎng)站的時候通常會遇到502錯誤、404錯誤等,很少會遇到504錯誤,但是在我們?nèi)ピL問大流量或者內(nèi)容數(shù)據(jù)量較多的網(wǎng)站時,打開網(wǎng)頁偶爾就會出現(xiàn)504 gateway time-out,這篇文章主要給大家介紹了關(guān)于Nginx?504?Gateway?Time-out的兩種解決方案,需要的朋友可以參考下2022-08-08