vue多数据源nginx配置

vue项目可以配置多个数据源地址

proxy: {
            "/api": { //数据源1
                target: "http://localhost:8080",
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            },
            "/sys": { //数据源2
                target: "http://192.168.1.78:8080",
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/sys': ''
                }
            }
        }

现在基本前后端分离，前端项目打包后放到nginx下，但是一访问接口都是404，此时还需要配置数据源码的代理

server {
        listen       8080;  //端口
        server_name  www.域名.com; //域名

        location / {  //项目访问地址
            root   /var/web/XXX;
            index  index.html index.htm;
            
        }
        
        location /api/ {  //数据源代理
            proxy_pass 接口地址1;
        }
        
        location /sys/ {  //数据源代理
            proxy_pass 接口地址2;
        }
    }

这样配置接口访问就都正常了，此外还可以接着配置图片访问等配置。如果配置完接口还是404，可以试试是不是地址少了/。