前端無法渲染CSS文件
問題描述：
啟動前端後，發現前端的頁面渲染不符合預期，看情況應該是css文件沒有生效。
排查步驟：
-
查看有無報錯資訊。
查看後台輸出，沒有可用的提示資訊，如圖：
-
確認 css 的路徑沒錯。
前端打包後的文件目錄如下：
html 中的 css 路徑如下：
文件路徑符合。 -
確認前端有請求到css。
再查看前端發送的請求，確實有請求css，但是 response 的Content-Type是text/plain。
排查到這裡，基本就確定了原因——瀏覽器只會渲染Content-Type為text/css的css文件。
解決方法：
在 Nginx 配置文件中添加這兩行程式碼即可。
# 引入MIME配置文件
include /etc/nginx/mime.types;
# 指定默認的文件類型為 application/octet-stream
default_type application/octet-stream;
Web伺服器在收到靜態資源的文件請求時，會進行以下操作：
- 識別文件的後綴名；
- 在伺服器的MIME配置文件中找到對應的 MIME Type；
- 根據 MIME Type 設置 response 的
Content-Type。
因此，在使用Nginx作為代理伺服器時，需要在nginx.conf 引入MIME配置文件。
參考資料：
Nginx(十八)mime.types的作用_wzj_110的部落格
