nginx部署二級(jí)目錄無(wú)法加載css和js

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

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

本次項(xiàng)目部署在二級(jí)目錄下，訪問(wèn)地址為：https://www.xxxxxx.com/cms/。

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

問(wèn)題一：訪問(wèn)首頁(yè)index.html報(bào)404

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

• nginx配置：

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

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

查看nginx錯(cuò)誤error.log日志文件，錯(cuò)誤日志：

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"

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

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

再次訪問(wèn)，沒(méi)有了404錯(cuò)誤，但是頁(yè)面一片空白。

問(wèn)題二：訪問(wèn)不到umi.js和umi.css

接著問(wèn)題一，查看nginx錯(cuò)誤error.log日志文件，錯(cuò)誤日志：

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/"

很明顯，從錯(cuò)誤日志信息可以看出，訪問(wèn)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目錄下面，頁(yè)面正常。

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

經(jīng)過(guò)一翻搜索最終解決方法

是修改.umirc.ts

• 如圖所示：

再次訪問(wèn)https://www.xxxxxx.com/cms/，頁(yè)面正常了。

后續(xù)應(yīng)用發(fā)布的話(huà)，前端頁(yè)面上傳到/usr/local/nginx/html/cmspage/dist/cms目錄就好，問(wèn)題解決?。?！

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。