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

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

'/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没有替换好，改了半天不知道该怎么操作？报错截图：