关于前端: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;}

举例

要拜访的根底页面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, 失常拜访页面。

要拜访的页面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代理到远端文件。

举例

要拜访的根底页面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, 失常拜访页面。

要拜访的页面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的配置, 所以写了这篇文章，心愿对大家有用~