How to configure proxy forwarding when the Vue project is deployed to the Nginx server?

in the production environment of the local Vue project, I stored the fake data in the root directory static/mock and configured proxyTable

   

Dec.01,2021

change the localhost in localhost / api to ip?


Agent to http://localhost:8080 port, then your port 8080 needs to be up. Usually, using npm run dev, webpack will help us start a port. The default is 8080, but if we use npm run build, it will only package static files for us, not start the port, so at this time, your port 8080 is not open, so it will not be accessible.


you need to rewrite the uri using nginx's rewrite before forwarding the request.

the specific configuration is as follows:

server {
    charset utf-8;
    listen 8080;
    server_name localhost;
    
    root ...
    
    location /api {
       rewite ^/api/(.*)$ /$1 break; 
       proxy_pass http://xxxx:8080'
    }
}
Menu