vue项目history模式页面404之nginx部署解决方案

问题

vue项目部署时，选择history模式，直接从首页进去，然后点击按钮，发现整个项目都没有问题，但是当刷新页面，或者直接输入非首页时，页面404无法找到。

分析

页面404说明访问页面不存在，vue项目，在history模式中，访问的是实际的地址，当访问如localhost时，nginx自动导向到index.html(nginx配置的)，当访问如localhost/test时，nginx会寻找test是否存在，不存在则返回404。那么test路劲对应的页面在哪呢？唯一的入口不就是‘index.html’吗？那么解决方案不就是让nginx找到index.html，所以突破口在nginx配置上

解决方案

nginx进行如下配置
location / {
root /usr/local/vue/;
index index.html;
try_files $uri $uri/ /index.html; //重点
}
,添加了“try_files $uri $uri/ /index.html”，意思就是访问页面时，会进行三种尝试，最终找到你期盼已久的404页面‘test’。