Nginx解决多目录单页应用BrowserHistory 下匹配正确 index.html 问题

[zhangyu921]

Nginx解决多目录单页应用BrowserHistory 下匹配正确 index.html 问题

使用 Browser History 路由的形式的单页应用，需要服务配合，例如在 nginx 下需要添加 try_files 配置。这样在路由分支下页面刷新的时候，可以返回 index.html；

如果配置了多个目录情况，例如：

example.com/app1 // app 1
example.com/app2 // app 2

一般可以采用配置多个 location 配合 alias 来实现：

location /app1 {
	alias /path/to/app1/;
	try_files $uri $uri/index.html /index.html;
}

如果想避免多次配置location，就需要实现在多级目录自动向上级查找 index.html 的机制，这里抛出一个实现，利用 try_files 最后一个参数，实现 all in one 的配置方法：

server {
	# ...

	location / {
		try_files $uri $uri/index.html @fallback;
	}
	
	location @fallback {
		# 取上级目录
		rewrite ^((?:\/[^\/]+)+)(?:\/[^\/]+)$ $1
	}
}