项目前后端分离，前端采用react和umijs框架开发，前端页面部署在nginx上面。原先的所有项目一直采用二级域名的部署方式，前端打包后上传到nginx目录下就能正常访问，一直没出现什么问题。本次项目部署在二级目录下，访问地址为：https://www.xxxxxx.com/cms/。前端页面打包后上传nginx目录，过程中出现了访问不到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/，结果浏览器出现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目录。这应该是跟nginx配置二级目录/cms内部机制有关。于是创建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目录下面，页面正常。

但是，总不能每次发布页面的时候单独把umi.css和umi.js放到/usr/local/nginx/html/build目录，而index.html放到/usr/local/nginx/html/cmspage/dist/cms目录，这根本不是问题的解决方案！！！

经过一翻搜索，终于找到一篇文章《umi nginx 非根目录部署 - 简书》，链接https://www.jianshu.com/p/defaa1b6b001。

经该文章的提示，最终解决方法是：修改.umirc.ts，如图所示。

再次访问https://www.xxxxxx.com/cms/，页面正常了。后续应用发布的话，前端页面上传到/usr/local/nginx/html/cmspage/dist/cms目录就好，问题解决！！！