404 problem occurs when Vue project refreshes

The vue page access is normal, but as soon as it is refreshed, the 404 problem occurs. There are two solutions:

1. Change the vue routing mode mode: 'history' to mode: 'hash'

        Just change the mode value in the js file used for routing. For example, my js file is as shown below

        

//index.js文件
const router = new Router({
    //mode: 'history', 
    mode: 'hash',
    routes: [
        { path: '/', redirect: '/login' },
        { path: '/login', component: Login },
    ]
})

2. In the server Nginxconfiguration file, add the following code and refresh it again.

location / {
 try_files $uri $uri/ @router;
  index index.html;
}
 
location @router {
  rewrite ^.*$ /index.html last;
}