Nginx 无法正确加载静态文件，静态文件加载404或者为html；Nginx 配置访问指定url路径项目部署；

问题

1.在nginx location 定义指定url段时，加载不到页面，例如：访问一级目录为 /mypage 并且 二级目录可以是任意非空值时/mypage/xxxxx，由于部署目录实际不存在 /mypage/xxxx，因此访问返回 404问题；

2.页面中使用相对路径引用静态文件时，使用指定url段访问页面，不能正确加载到静态文件，例如：访问一二级目录构成的url/mypage/special时，假如html中有一个静态文件引入路径为./style.css，那么在实际访问页面时加载的静态路径为http://localhost:9995/mypage/style.css，由于部署目录不存在mypage，因此导致静态文件加载失败。

调整Nginx配置文件进行解决

server {
    listen       9995;
    server_name  localhost;

    root /html;
	
	# 解决问题1：通过正则正确匹配指定url段，使用 try_files 指令索引 html
    location ~ /mypage/[^/]+$ {
    	# 注意：第三部分 /index.html 可以理解为，客户端对 http://localhost:9995/index.html 的直接访问，
    	#	详情参考nginx的try_files指令解释
        try_files $uri $uri/ /index.html;
    }
    
    # 解决问题2：对静态文件的访问进行url rewrite
    location ~* \.(gif|jpg|jpeg|bmp|png|ico|txt|js|css)$ {  
    	# 例如访问 /mypage/style.css rewrite 会重写 url 为 /style.css，此时需要确保项目根目录下存在  style.css 文件
    	# 例如访问 /mypage/imgs/bg.png rewrite 会重写 url 为 /imgs/bg.png，
    	#	此时需要确保项目存在二级目录 imgs 并且 imgs 目录下存在 bg.png 文件
    	# 注意：rewrite 第三个参数不同值的效果，此处使用 break，解释为 rewrite 之后不在重新进行 location 匹配，
    	#	以防止rewrite 之后 url 依然存在当前location匹配的后缀，导致当前location进入死循环
        rewrite ^/(.*?)(imgs.*|[^/]*)$  /$2 break;
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

Nginx 指令官方文档

location
try_files
rewrite

相关Nginx 指令参考博客

nginx Rewrite（重写地址）
nginx路径匹配规则及配置nginx静态文件或者视频文件的本地播放等
nginx正则及location匹配