History Router Nginx配置

前言

在开发单页应用的时候, 如果使用History路由, 我们要保证每个可访问路径都能直接访问到index.html的内容。
本文主要讲解History路由模式下的Nginx配置。

一、Index.html存在服务器本地

这种方式应该是非常普遍的, 在VueRouter的官方文档中也提到了, 只需要配置一个location try_files默认指向index.html即可。

location / {
  add_header Cache-Control 'no-store, no-cache'; // 设置不缓存
  try_files $uri $uri/ /index.html;
}

举例

1. 要访问的基础页面Url是 a.b.com/main/, 并且index.html存储在服务器的/home/dist/index.html下

   // 配置在a.b.com域名下
   location /main/ {
     try_files $uri $uri/ /home/dist/index.html;
   }
   

   这样的配置就可以实现访问 a.b.com/main/a/ 或者 a.b.com/main/b/, 即访问 a.b.com/main/ 下的任意子路径, 都可以直接访问到index.html, 正常访问页面。

2. 要访问的页面Url基础路径是 b.c.com/, 并且index.html存储在服务器的/dist/index.html下

   // 配置在b.c.com域名下
   location / {
     try_files $uri $uri/ /dist/index.html;
   }
   

   这样的配置就可以实现访问 b.c.com/a/ 或者 a.b.com/b/, 即访问 a.b.com/ 下的任意子路径, 都可以直接访问到index.html, 正常访问页面。

二、Index.html存在远程地址

有的时候我们的index.html并不会存在于服务器本地上，而是有可能上传到了oss或者cdn上，也就是一个远程的地址，比如 oss.b.com/project/ind…, 这时候就需要下面的这种配置方式了。

location ^~ /test/ {
    add_header Cache-Control 'no-store, no-cache'; // 设置不缓存
    rewrite ^ /project/index.html break;
    proxy_pass https://oss.b.com;
}

也就是先重写访问路径, 再通过proxy_pass代理到远端文件。

举例

1. 要访问的基础页面Url是 a.b.com/main/, 并且index.html存储在 oss.b.com/project/ind… 下

   // 配置在a.b.com域名下
   location /main/ {
       rewrite ^ /project/index.html break;
       proxy_pass https://oss.b.com;
   }
   

   这样的配置就可以实现访问 a.b.com/main/a/ 或者 a.b.com/main/b/, 即访问 a.b.com/main/ 下的任意子路径, 都可以直接访问到index.html, 正常访问页面。

2. 要访问的页面Url基础路径是 b.c.com/, 并且index.html存储在 oss.b.com/index.html 下

   // 配置在b.c.com域名下
   location / {
       rewrite ^ /index.html break;
       proxy_pass https://oss.b.com;
   }
   

   这样的配置就可以实现访问 b.c.com/a/ 或者 a.b.com/b/, 即访问 a.b.com/ 下的任意子路径, 都可以直接访问到index.html, 正常访问页面。

写在最后

本文到这里就结束啦 因为看网上很少有关于远程index.html的配置, 所以写了这篇文章，希望对大家有用。 转载请注明作者和本文链接。