转载

History API 路由方案 Nginx 配置

1. 背景

之前使用 History API 作为路由方案升级了组内单页视图引擎。完整的实现还需要 Nginx 的辅助配置，因为当页面刷新时，通过 pushState 到达的路由很可能并不存在对应的资源，所以要使同一个项目下的所有路由匹配到项目对应的单页资源。

2. 方案

其实主要的工作是对3种资源的 uri 配置 rewrite：

HTML 资源
引用到的项目 JS 资源
引用到的项目 img 资源

对应的配置如下：

# match img resource location ~ /wa/([/w|-]+)/([/w|-]+)/img/(.*) {     rewrite /wa/([/w|-]+)/([/w|-]+)/img/(.*) /wa/$1/img/$3 break; }   # match page js resource location ~ /wa/([/w|-]+)/([/w|-]+)/page/(.*/.js) {     rewrite /wa/([/w|-]+)/([/w|-]+)/page/(.*/.js) /wa/$1/page/$3 break; }   # match HTML resource location ~ /wa/([/w|-]+)/.* {     rewrite  ^/wa/([/w|-]+)/([/w|-]+)$ /wa/$1/$2.html break;     rewrite  ^/wa/([/w|-]+)/([/w|-]+)/([/w|-]+)$ /wa/$1/$2.html break; }

其中 /wa/ 为所有项目所处的统一目录，第二级目录为项目所在目录，第三级对应项目下的某个单页，第四级为可选，且表示某个单页项目下的某个具体 view。

原文 http://nodefe.com/history-api-nginx/

正文到此结束