The Vue project runs normally locally, but after packaging and uploading to the server, the request address 404 problem

Problem solved: Change
the configuration in nginx to add an extra slash.proxy_pass http://127.0.0.1:8080;proxy_pass http://127.0.0.1:8080/;

Problem Analysis:
After the Vue project is packaged, a 404 error occurs when the interface request cannot be received at the backend. This is because the proxyTable proxy configuration fails after the Vue project is packaged.
Since the proxy fails after the Vue project is packaged, it is necessary to use Nginx to perform a reverse proxy request, but a 404 error still occurs. When configuring proxy_pass reverse proxy in nginx, when "/" is added to the following url, which is equivalent to an absolute root path, nginx will not proxy the matching path part in location; if there is no "/", it will Give the matching path part to the proxy as well.

For example: The access interface is /api/menu/getMenuList
When the url behind the proxy_pass of the nginx configuration file contains "/", the path from the proxy to the backend is http://127.0.0.1:8080/menu/getMenuList, omitting the match to the /api/ path;

location /api/ {
    
     
  proxy_pass   http://127.0.0.1:8080/;
}

When the url behind the nginx configuration file proxy_pass does not contain "/", the proxy path to the backend is: http://127.0.0.1:8080/api/menu/getMenuList, together with the matched /api/ path;

location /api/ {
    
     
  proxy_pass   http://127.0.0.1:8080;
}

Reference study article: https://blog.csdn.net/qq_42784165/article/details/110297059