Vue项目部署到Nginx服务器上，如何配置代理转发？

Question

在本地Vue项目的生产环境中，我将假数据存在根目录static/mock下，并且配置了proxyTable

proxyTable: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin:true,
        pathRewrite: {
          '^/api': 'static/mock'  //将url中的api替换成static/mock
        }
      }
    }

我在使用Axois发送Ajax请求时,像下面这样：

axios.get('/api/example.json')

在本地运行，npm run dev 是没有问题的。

---

当我把项目打包npm run build放到Nginx服务器上进行如下配置：

    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
            proxy_pass http://localhost:8080;  //代理到8080端口
            add_header 'Access-Control-Allow-Origin' '*'; //允许跨域
        }
        location /api/ {
            # rewrite ^/api/(.*) http://localhost:8080/static/mock/$1 permanent;
            proxy_pass http://localhost:8080/static/mock; //匹配api转发路径
        }

总会报错，拿不到Json数据。看了一下是404错误，我猜测应该是url没有替换好，改了半天不知道该怎么操作？报错截图：

Answer 1

localhost /api 中的 localhost 换成 ip 试试？

Answer 2

代理到http://localhost:8080端口，那你的8080端口要起了才行，平时用 npm run dev, webpack会帮我们启动一个端口，默认就是8080，但是如果我们使用 npm run build，只会给我们打包静态文件，并不会启动端口，所以这个时候，你的8080端口并没有开启，这样的话，就无法访问了。

Answer 3

你需要使用 nginx 的 rewrite 对 uri 进行重写，再转发请求。

具体配置如下：

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