前言在开发单页应用时，如果使用History路由，我们需要保证每条可访问的路径都能直接访问到index.html的内容。本文主要讲解History路由模式下的Nginx配置。1.服务器本地存在Index.html应该是很常见的。在VueRouter的官方文档中也有提到。你只需要配置一个位置try_files默认指向index.html即可。location/{add_headerCache-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域名位置下/{try_files$uri$uri//dist/index.html;}这样的配置可以实现访问https://b.c.com/a/或https://a.b.com/b/，即访问https下的任意子路径：//a.b.com/。直接访问index.html，正常访问页面。2、index.html有远程地址有时候我们的index.html在服务器本地并不存在，可能是上传到oss或者cdn上，这是一个远程地址，比如https://oss。b.com/project/ind...这时候就需要如下配置方式。location^~/test/{add_headerCache-Control'no-store,no-cache';//设置为不缓存重写^/project/index.htmlbreak;proxy_passhttps://oss.b.com;}即先重写访问路径，再通过proxy_pass代理到远程文件。比如要访问的基础页面的URL是https://a.b.com/main/，index.html存放在https://oss.b.com/project/ind...//配置下a.b.com域名位置/main/{改写^/project/index.htmlbreak;proxy_passhttps://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域名位置下/{重写^/index.html中断；proxy_passhttps://oss.b.com;}这个配置可以实现访问https://b.c.com/a/或者https://a.b.com/b/，即访问https://任意子a.b.com/下的路径可以直接访问index.html，可以正常访问页面。写在最后本文到此结束~因为网上关于远程index.html的配置很少，所以写了这篇文章，希望对大家有用~
