单页面nginx配置详解

单页面应用发布后刷新页面404遇到过么？本篇我们来聊下单页面相关的nginx配置。

nginx是一个高性能的反向代理服务器，也经常用于服务静态资源。一般发布一组静态资源需要配置一个location快，里面填好root跟目录，就可以对外提供这个文件夹的资源访问。如下：

location / {
  root /path/to/static/files/;
}

但是单页面只使用root并不行，放到nginx之后一般需要额外的配置。否则在一个较深的url上，刷新页面就会变成404。这是因为单页面的路由在页面运行过程中是虚拟的。后端并不存在对应的静态资源匹配对应的url。

解决这个问题需要告诉nginx，假如资源找不到就返回index.html给前端。

location / {
  root /path/to/static/files/;
  try_files $uri $uri/ /index.html;
}

假如spa的跟路径是某个路径的话，用root可能会有问题。因为它跟$uri的内容有关，它包含了已经匹配的路径。最好使用alias替换root。alias使$uri去掉了location已经匹配的部分。

location /app {
  alias /path/to/static/files/;
  try_files $uri $uri/ /index.html;
}