Solution to the 404 error report in VUE's history mode except index

Let's look at the code first:

location / {
index ;
root /dist;
try_files $uri $uri/ /;
}

try_files will first determine whether it is a file or a directory, and it will be found that it is a file, matching the first parameter $uri variable.
Then go to the website directory to find out whether the file exists. If it exists, read it directly and return it. If there is no existence, jump directly to the third parameter.

What I don't understand now is that since I jumped to the index, why is it displayed after the route?

Content extension:

Question background:

vue-router is hash mode by default. The hash of the url is used to simulate a complete url. When the url changes, the page will not be reloaded. But if we don't want to have a path ending with #, we can use the history mode of the route. For example, if the URL is as follows: If you use hash mode, then the access becomes http://localhost:8080/bank/page/count/#/. If the route uses history, the access path becomes as follows: http://localhost:8080/bank/page/count;

However, this mode of history requires backend configuration support. For example: When we are working on the homepage of the project, everything is normal and can be accessed, but when we refresh the page or directly access the path, we will return 404. That is because in history mode, we only dynamically change the path in the browser address bar through js operations, and no http request is initiated. However, when I enter this address directly in the browser, I must initiate an http request to the server, but this target does not exist on the server, so it will return 404.

How to solve it? We can now forward all requests to http://localhost:8080/bank/page/.

Solution:

For VUE's router[mode: history] mode, there are generally no problems when developing. This is because the server used during development is node, and the Dev environment has naturally been configured.

But when it is placed under nginx, there are naturally other things to pay attention to. The summary is as follows:

After configuring the following configuration in nginx, there may be no problem with the home page, but other links will appear (404)

location / {
   root D:\Test\exprice\dist;
   index  ;
   try_files $uri $uri/ /;
   add_header 'Access-Control-Allow-Origin' '*';
   add_header 'Access-Control-Allow-Credentials' 'true';
   add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
   add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
  }
  
  location ^~/api/ {
   proxy_pass http://39.105.109.245:8080/;
  }

To solve the 404, two methods are needed:

1. Recommended by the official website

location / {
root D:\Test\exprice\dist;
index  ;
try_files $uri $uri/ /;

2. Match errpr_page

location /{
root /data/nginx/html;
index  ;
error_page 404 /;
}

3、

 server {
  listen  8888;#The default port is 80, if the port is not occupied, you don't need to modify it  server_name localhost;
  root  E:/vue/my_project/dist;#vue project after packaging dist  location / {
   try_files $uri $uri/ @router;# Need to point to the @router below, otherwise the route of vue will appear refreshed in nginx and appears 404   index  ;
  }
  #Complied with @router above, the main reason is that the routed path resource is not a real path, so the specific file cannot be found  # Therefore, you need to rewrite it and then hand it over to the route to process the request resource  location @router {
   rewrite ^.*$ / last;
  }
  #......Other parts are omitted }

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.