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)文章
if指令該指令用來支持條件判斷,并根據(jù)條件判斷結(jié)果選擇不同的Nginx配置,本文主要介紹了nginx if 指令的具體使用,具有一定的參考價(jià)值,感興趣的可以了解一下2024-05-05
Nginx實(shí)現(xiàn)分端口部署兩個(gè)或多個(gè)項(xiàng)目的教程
這篇文章主要為大家詳細(xì)介紹了Nginx實(shí)現(xiàn)分端口部署兩個(gè)或多個(gè)項(xiàng)目的相關(guān)教程,其中包含了反向代理配置,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-10-10
Nginx實(shí)現(xiàn)404錯(cuò)誤自動(dòng)跳轉(zhuǎn)到首頁的配置過程
當(dāng)用戶在訪問網(wǎng)站的過程中遇到404錯(cuò)誤時(shí),通常情況下應(yīng)該顯示一個(gè)友好的錯(cuò)誤頁面,而不是僅僅顯示一個(gè)簡單的錯(cuò)誤提示,在Nginx中,可以通過配置來實(shí)現(xiàn)404錯(cuò)誤自動(dòng)跳轉(zhuǎn)到首頁的功能,下面將詳細(xì)介紹如何進(jìn)行配置,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了Nginx Rewrite模塊應(yīng)用的幾種場景，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
內(nèi)網(wǎng)環(huán)境nginx配置https訪問的過程詳解
這篇文章主要介紹了內(nèi)網(wǎng)環(huán)境nginx配置https訪問,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-06-06
Nginx域名轉(zhuǎn)發(fā)使用場景代碼實(shí)例
這篇文章主要介紹了Nginx域名轉(zhuǎn)發(fā)使用場景代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
在Nginx配置中,root和alias都是用于指定請(qǐng)求對(duì)應(yīng)的文件系統(tǒng)路徑的指令,但它們的工作方式有顯著區(qū)別,這篇文章主要介紹了nginx中指令root與alias的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-11-11
這篇文章主要為大家介紹了Nginx如何代理UDP連接的實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
Nginx同端口部署多個(gè)vue以及unapp項(xiàng)目
文章詳細(xì)介紹了如何在同一端口下部署PC端和App端項(xiàng)目,包括Nginx配置、前端打包配置、manifest.json配置以及針對(duì)Vue3+vite項(xiàng)目的特殊配置,通過示例項(xiàng)目A和項(xiàng)目B,展示了如何修改Vite配置文件、調(diào)整路由配置,并通過Nginx進(jìn)行關(guān)鍵配置2026-01-01
Nginx?504?Gateway?Time-out的兩種最新解決方案
大家在訪問網(wǎng)站的時(shí)候通常會(huì)遇到502錯(cuò)誤、404錯(cuò)誤等,很少會(huì)遇到504錯(cuò)誤,但是在我們?nèi)ピL問大流量或者內(nèi)容數(shù)據(jù)量較多的網(wǎng)站時(shí),打開網(wǎng)頁偶爾就會(huì)出現(xiàn)504 gateway time-out,這篇文章主要給大家介紹了關(guān)于Nginx?504?Gateway?Time-out的兩種解決方案,需要的朋友可以參考下2022-08-08