vue-nginx刷新404问题
文章目录
- 1. 背景介绍
- 2. 问题描述
- 2.1 问题一
- 2.2 问题二
- 3. 原因分析
- 3.1 问题一
- 3.2 问题二
- 4. 排查问题一原因
- 5. 反思
- 6. nginx root与alias的使用
- 7. 更优雅地解决vue网页浏览器刷新404
- 7.1 try_files
- root与alias作用域
- 7.2 error_page 404
- 7.3 前端配置404
先说初步得到的结论，这只是我根据测试结果的推测，并没有阅读源码探究原因。在nginx如下配置中，有’/index’路由匹配规则
location /index {alias /home/hfy/dist;index index.html;
}
由于’/index’中的index为关键字，导致路由匹配发生异常，与预期不符，把’/index’更改为’/home’，恢复正常
1. 背景介绍
vue项目只有一个组件，路由模式是history，路由中有一个根路径重定向配置，路由配置如下
const routes = [{path: '/',redirect: '/index'},{path: '/index',name: 'index',component: () => import('../views/IndexView.vue')}
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})
vue项目build之后，使用nginx部署build之后的产物，nginx路由配置如下
location / {root /home/hfy/dist;index index.html;
}location /index {alias /home/hfy/dist;index index.html;
}/home/hfy/dist文件夹中存放的是build产物，包含css、fonts、js文件夹以及favicon.ico、index.html
我添加上述 location /index规则是想解决刷新页面后404问题
即通过url: example.com访问时，加载到index.html之后，前端路由会重定向到example.com/index，这时候刷新页面，浏览器会请求example.com/index。如果不添加location /index规则，nginx无法匹配到/index，会返回404。
但是我添加该规则后遇到了下面的问题一。
2. 问题描述
2.1 问题一
通过url：example.com 访问该项目，nginx提示404
通过url: example.com/index 访问该项目，可以正常访问
2.2 问题二
如果把nginx路由配置更改为
location / {root /home/hfy/dist;index index.html;
}#location /index {
# alias /home/hfy/dist;
# index index.html;
#}通过url: example.com 访问该项目，可以正常访问
通过url: example.com/index 访问该项目，nginx提示404
3. 原因分析
3.1 问题一
- 通过url: example.com/index 访问该项目时，命中规则
location /index {alias /home/hfy/dist;index index.html;
}
/home/hfy/dist文件夹中存在index.html，所以访问的是/home/hfy/dist/index.html
- 通过url: example.com 访问该项目时，命中规则
location / {root /home/hfy/dist;index index.html;
}
应该能访问到/home/hfy/dist/index.html，但是却提示404， 无法理解，在4.排查问题一原因中将介绍如何找到该问题原因
3.2 问题二
问题二我是这样理解的，location /index规则被注释掉不起作用
- 通过url: example.com 访问项目时，命中规则
location / {root /home/hfy/dist;index index.html;
}
域名会被root替换，访问的是/home/hfy/dist/中的index.html
- 通过url: example.com/index 访问项目时，同样命中上述规则，域名被root替换，访问的是/home/hfy/dist/中的index文件或者index文件夹，但是并不存在index文件或者index文件夹，所以报错404
4. 排查问题一原因
我之前还写过另一个vue项目，跟这个项目类似，前端路由中同样使用了history模式以及重定向，nginx配置也类似，但是却没有出现404问题，那我就把这两个项目做对比，排查原因。为了方便叙述，把出404问题的项目叫做项目一，未出问题的项目称项目二。如下是项目二的配置。
// 前端路由配置
const routes = [{path: '/',redirect: '/home'},{path: '/home',name: 'home',component: () => import('../views/HomeView.vue')}
]
# nginx配置
location / {root /home/hfy/other_dist;index index.html;
}location /home {alias /home/hfy/other_dist;index index.html;
}我怀疑可能出问题的地方如下
- 由于项目一与项目二vue-router等依赖的版本不同，项目一的index.html可能有问题
- 项目一的nginx虚拟主机配置有问题
为了验证1，我把项目二nginx配置location / root指向项目一，发现可以通过/ 访问到index.html，说明项目一的index.html文件没问题
为了验证2，我把项目一的location规则换成项目二的规则，在更换的过程中，发现只把location / root指向项目二，通过/访问不到项目二，但是把location /index换成location /home alias指向项目二，突然可以访问到项目二了。说明项目一的虚拟主机配置没问题，这时候也意识到了location /index中index是关键字，关键字不能直接写在location匹配url中
5. 反思
在实际排查问题一时，并不是这么简单，而是想到什么测试什么，这样测试比较混乱，容易重复测试，或者漏掉测试，这样测试得出的结论也不自信，也容易忘记测试的结果。
应该提前想好可能是哪里出现问题了，并一一罗列出来，根据这些问题设计出测试方法，并想好每一种测试结果能推测出的结论。还要及时做记录，防止遗忘。
发现浏览器隐私模式也会使用缓存，在测试问题前要清理浏览器缓存。
6. nginx root与alias的使用
在排查问题时详细分析了nginx root与alias的用法: 详解nginx的root与alias
7. 更优雅地解决vue网页浏览器刷新404
7.1 try_files
上面的解决方法是在nginx中为vue的一个路由单独配置location规则，并依靠alias正确返回index.html文件，即构建好的前端页面。如果前端路由比较少，这种方法还能够接受。如果前端有十几个甚至几十个路由，就需要在nginx中同步配置这些路由，显然太麻烦了。
在Vue Router官网中提到了history路由模式下浏览器刷新404的问题
当使用这种历史模式时，URL 会看起来很 “正常”，例如 https://example.com/user/id 漂亮!
不过，问题来了。由于我们的应用是一个单页的客户端应用，如果没有适当的服务器配置，用户在浏览器中直接访问 https://example.com/user/id ，就会得到一个 404 错误。这就尴尬了。
官方给出了nginx的解决方案
location / {try_files $uri $uri/ /index.html;
}
try_files指令的详细解析可以参考文章Nginx的try_files指令详解，其作用是按顺序检查文件是否存在，返回第一个找到的文件或文件夹(结尾加斜线表示为文件夹)，如果所有的文件或文件夹都找不到，会进行一个内部重定向到最后一个参数。
我们以https://example.com/user/id 为例。
try_files首先会在nginx指定的root目录下寻找uri文件。假设root设置为/home/hfy/，那么就是寻找/home/hfy/uri文件。假设root设置为/home/hfy/，那么就是寻找/home/hfy/uri文件。假设root设置为/home/hfy/，那么就是寻找/home/hfy/uri，其中的$uri是url中的路径，即/user/id。所以最终的访问路径是/home/hfy/user/id。
如果不存在id这个文件，就继续判断是否存在/home/hfy/user/id/文件夹。如果仍然不存在，就返回指令的最后一个参数，root文件夹中的/index.html文件，即/home/hfy/index.html
root与alias作用域
我们看到官方给的配置中，并未出现root
location / {try_files $uri $uri/ /index.html;
}
root可以在location内部指定，只针对该location规则生效，也可以写在location外server内，作用域是整个server，但是location内的root会覆盖掉外部root。如果没有设置root，默认是nginx安装目录的html文件夹。比如我的是/usr/local/nginx/html/
alias只能写在location内部。
7.2 error_page 404
在nginx设置
error_page 404 /index.html;
同样可以在刷新时正确返回index.html页面，这样做是在投机取巧。虽然返回了正确页面，但是在浏览器控制台的网络请求中可以看到响应的状态码仍然是404，所以推荐try_files的方法。
7.3 前端配置404
我们在nginx使用try_files指令解决了404问题，但是也带来了新的问题。假设用户访问前端并不存在的路由比如http://example.com/not/exist ，但nginx仍然返回了index.html，用户并不知道发生了404错误。这就需要在前端专门提供一个404页面，当用户访问不存在的路由时，展示该页面。
vue router配置如下
const HomeView = () => import('@/views/HomeView')
const ErrorView = () => import('@/views/404View')
const routes = [{path: '/',redirect: '/home'},{path: '/home',name: 'home',component: HomeView},// 增加404路由与页面，测试发现path: '*' 不是必须写在最后的{path: '/404',component: ErrorView},{path: '*',redirect: '/404'}
]