History API 路由方案 Nginx 配置

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

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

对应的配置如下：

# match img resource

location ~ /resource/wa/([\w|-]+)/(img|page)/(.*) {

rewrite ^/resource/wa/([\w|-]+)/(img|page)/(.*)$ /resource/$1/$2/$3 last;

}

location ~ /resource/wa/([\w|-]+)/([\w|-]+)/(img|page)/(.*) {

rewrite ^/resource/wa/([\w|-]+)/([\w|-]+)/(img|page)/(.*)$ /resource/$1/$3/$4 last;

}

# match HTML resource

location ~ /resource/wa/([\w|-]+)/.* {

rewrite ^/resource/wa/([\w|-]+)/([\w|-]+)$ /resource/$1/$2.html last;

rewrite ^/resource/wa/([\w|-]+)/([\w|-]+)/([\w|-]+)$ /resource/$1/$2.html last;

}

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

注：转载注明出处并联系作者，本文链接：https://nodefe.com/history-api-nginx-config/

zee