Two solutions to the 404 problem when refreshing the page in vue routing history mode

This article brings you two solutions to the 404 problem when refreshing the page in Vue routing history mode. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

In vue hash mode, there is '#' in the URL. This problem can be solved by using 'history' mode. But in history mode, after refreshing the page, the page will appear 404. The solution is to configure it with nginx.

Modify in nginx configuration file

Method one:

location /{
    root   /data/nginx/html;
    index  index.html index.htm;
    if (!-e $request_filename) {
        rewrite ^/(.*) /index.html last;
        break;
    }
}

Method two:
vue.js official tutorial Mentioned https://router.vuejs.org/zh/g...

  server {
        listen       8081;#默认端口是80，如果端口没被占用可以不用修改
        server_name  myapp.com;
        root        D:/vue/my_app/dist;#vue项目的打包后的dist
        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
        #因此需要rewrite到index.html中，然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #.......其他部分省略
  }

The above is the detailed content of Two solutions to the 404 problem when refreshing the page in vue routing history mode. For more information, please follow other related articles on the PHP Chinese website!