nginx部署二級目錄無法加載css和js的問題及解決過程

更新時間：2025年09月10日 09:55:59 投稿：jingxian

文章描述了React+UmiJS項目部署到Nginx二級目錄時遇到的404和靜態(tài)資源加載問題,因Nginx路徑配置錯誤導致,通過調(diào)整.umirc.ts文件,修正了資源路徑,最終實現(xiàn)正常部署

nginx部署二級目錄無法加載css和js

項目前后端分離，前端采用react和umijs框架開發(fā)，前端頁面部署在nginx上面。

原先的所有項目一直采用二級域名的部署方式，前端打包后上傳到nginx目錄下就能正常訪問，一直沒出現(xiàn)什么問題。

本次項目部署在二級目錄下，訪問地址為：https://www.xxxxxx.com/cms/。

前端頁面打包后上傳nginx目錄，過程中出現(xiàn)了訪問不到css和js的問題，問題詳情及解決方案如下。

問題一：訪問首頁index.html報404

前端頁面目錄：/usr/local/nginx/html/cmspage/dist，目錄下面上傳三個文件：index.html、umi.css、umi.js。

nginx配置：

        location /cms/ {
            root   html/cmspage/dist;
            index  index.html index.htm;
        }

重啟nginx后，訪問https://www.xxxxxx.com/cms/，結(jié)果瀏覽器出現(xiàn)404。

查看nginx錯誤error.log日志文件，錯誤日志：

2022/07/06 15:55:57 [error] 25943#0: *161 "/usr/local/nginx/html/cmspage/dist/cms/index.html" is not found (2: No such file or directory), client: 172.16.252.1, server: www.xxxxxx.com, request: "GET /cms/ HTTP/1.1", host: "www.xxxxxx.com"

很明顯，從錯誤日志信息可以看出，首頁index.html所在的目錄竟然多了一層cms目錄。這應(yīng)該是跟nginx配置二級目錄/cms內(nèi)部機制有關(guān)。

于是創(chuàng)建cms目錄，將前端頁面文件上傳到目錄/usr/local/nginx/html/cmspage/dist/cms。

再次訪問，沒有了404錯誤，但是頁面一片空白。

問題二：訪問不到umi.js和umi.css

接著問題一，查看nginx錯誤error.log日志文件，錯誤日志：

2022/07/06 16:03:53 [error] 28172#0: *217 open() "/usr/local/nginx/html/build/umi.css" failed (2: No such file or directory), client: 172.16.252.1, server: www.xxxxxx.com, request: "GET /umi.css HTTP/1.1", host: "www.xxxxxx.com", referrer: "https://www.xxxxxx.com/cms/"
2022/07/06 16:03:53 [error] 28172#0: *217 open() "/usr/local/nginx/html/build/umi.js" failed (2: No such file or directory), client: 172.16.252.1, server: www.xxxxxx.com, request: "GET /umi.js HTTP/1.1", host: "www.xxxxxx.com", referrer: "https://www.xxxxxx.com/cms/"

很明顯，從錯誤日志信息可以看出，訪問umi.css和umi.js所在的目錄竟然是/usr/local/nginx/html/build，而不是/usr/local/nginx/html/cmspage/dist/cms。

嘗試把umi.css和umi.js放到/usr/local/nginx/html/build目錄下面，頁面正常。

但是，總不能每次發(fā)布頁面的時候單獨把umi.css和umi.js放到/usr/local/nginx/html/build目錄，而index.html放到/usr/local/nginx/html/cmspage/dist/cms目錄，這根本不是問題的解決方案?。?！