nginx解决vue路由history模式刷新404问题

Posted 2021-07-03 看见月亮的人

在nginx上部署vue项目(history模式)；

vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：
使用hash模式的话，那么访问变成 http://localhost:8080/bank/page/count/#/ 这样的访问，如果路由使用 history的话，那么访问的路径变成 如下：
http://localhost:8080/bank/page/count 这样的了；

不过history的这种模式需要后台配置支持。比如：
当我们进行项目的主页的时候，一切正常，可以访问，但是当我们刷新页面或者直接访问路径的时候就会返回404，那是因为在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我直接在浏览器里输入这个地址的时候，就一定要对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404，怎么解决呢？我们现在可以把所有请求都转发到 http://localhost:8080/bank/page/index.html上就可以了。

所以我们需要使用nginx的try_files，去查找index.html.

nginx配置：

location / {
    add_header Cache-Control no-store;
    add_header Pragma no-cache;
    add_header Expires 0;
    root /home/test/;
    try_files $uri $uri/ @router;
    autoindex on;
  }

try_files $uri $uri/ @router;

$uri 这个是nginx的变量，代表用户访问的单个文件地址。
比如：http://test.com/index.html, 那么$uri就是 /index.html。

$uri/ 这个代表用户访问的文件目录。
比如：http://test.com/index.html, 那么$uri就是 /index.html。

所以try_files $uri $uri/的意思就是，比如http://test.com/example先去查找单个文件example，如果example不存在，则去查找同名的文件目录/example/，如果再不存在，将进行重定向@router

配置示例：

  location / {
    root /opt/data/nginx/html/pc/;
    index index.php index.html index.htm;
    try_files $uri $uri/ /index.html;
    error_page 404 /index.html;
  }

凡是404的路由，都会被重定向到index.html，这样就显示正确了