history路由模式线上适配

一、问题描述及原因1、问题描述2、问题原因 二、解决方法1.项目部署在根目录时2.项目部署在自定义目录

一、问题描述及原因

1、问题描述

当我们将项目成功部署线上之后，按照路径正常访问项目时正常，在项目中使用目录跳转也正常，但是一旦刷新网页就会nginx404。并且直接使用二级路由的路径访问项目也是404

2、问题原因

首先官网对此有所解答，官网地址：vue-router Html5 History模式 大致来说就是vue-router模式使用hash模式：使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。所以适配性更好，刷新页面时也不会有问题存在。但是他的缺点就是会添加#号，看起来就很不正常。

所以我们会选择更加优美的history模式：充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

但是页面刷新时，nginx就会根据你的路由寻找页面。

举个例子： 我的项目是部署在nginx的html文件夹的assembly目录下 那我访问时就是： http://128.129.103.157/assembly

如果我进入二级目录时，当前路径就是： http://128.129.103.157/assembly/about

这时我刷新浏览器的页面，nginx就会按照路径去找对应的页面，他就会去assembly文件夹下面的about文件夹下面去找index.html，但是我们的vue是单页面应用，根本就没有about文件夹，所以自然就找不到，也就会nginx 404。

二、解决方法

我们按照官方说法，修改nginx的配置，在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

意思就是：只要你浏览器访问的是我项目下的路径，就给我跳转到我项目中的那唯一一个index.html，这样就不会出现404，而且路由还会被vue-router所捕获到，仍旧在当前页面刷新，并不会被重定向到首页

1.项目部署在根目录时

也就是你的nginx的html目录里面就是你的vue项目 配置方式按照官网所说 在nginx.conf里面的server下面的

location / { root html; index index.html index.htm; }

中增加一句 try_files $uri $uri/ /index.html;

最后应该是

location / { root html; index index.html index.htm; try_files $uri $uri/ /index.html; }

代表凡是匹配到 / 都会被跳转到 / 下的index.html

2.项目部署在自定义目录

一般我们都不会吧项目部署在根目录，因为我们部署的项目一般不止一个，而且部署在根目录不太易于管理 这样我们就要稍微修改一下配置 在 location / { } 配置下面再新增加一条配置，比如我是在assembly目录下：

location /assembly/ { try_files $uri $uri/ /assembly/index.html; }

你就将 ‘assembly/’ 替换成你的 ‘文件夹名称/’ 即可 如果是多级目录，就依次在后面拼接

配置修改完成之后记得重启nginx /usr/local/nginx/sbin/nginx -s reload