关于前端: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 是 https://a.b.com/main/, 并且 index.html 存储在服务器的 /home/dist/index.html 下

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

 这样的配置就能够实现拜访 https://a.b.com/main/a/ 或者 https://a.b.com/main/b/, 即拜访 https://a.b.com/main/ 下的任意子门路, 都能够间接拜访到 index.html, 失常拜访页面。

1. 要拜访的页面 Url 根底门路是 https://b.c.com/, 并且 index.html 存储在服务器的 /dist/index.html 下

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

   这样的配置就能够实现拜访 https://b.c.com/a/ 或者 https://a.b.com/b/, 即拜访 https://a.b.com/ 下的任意子门路, 都能够间接拜访到 index.html, 失常拜访页面。

二、Index.html 存在近程地址

有的时候咱们的 index.html 并不会存在于服务器本地上，而是有可能上传到了 oss 或者 cdn 上，也就是一个近程的地址，比方 https://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 是 https://a.b.com/main/, 并且 index.html 存储在 https://oss.b.com/project/ind… 下

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

 这样的配置就能够实现拜访 https://a.b.com/main/a/ 或者 https://a.b.com/main/b/, 即拜访 https://a.b.com/main/ 下的任意子门路, 都能够间接拜访到 index.html, 失常拜访页面。

1. 要拜访的页面 Url 根底门路是 https://b.c.com/, 并且 index.html 存储在 https://oss.b.com/index.html 下

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

   这样的配置就能够实现拜访 https://b.c.com/a/ 或者 https://a.b.com/b/, 即拜访 https://a.b.com/ 下的任意子门路, 都能够间接拜访到 index.html, 失常拜访页面。

写在最初

本文到这里就完结啦~ 因为看网上很少有对于近程 index.html 的配置, 所以写了这篇文章，心愿对大家有用~