Vue部署Nginx之后，接口请求后端报404

部署到Nginx后，配置在vue中的针对某些请求（比如后端请求）的代理会失效（表现为这部分请求会404错误，但是项目css等静态资源都能正常访问），这时需要对Nginx配置相应的请求代理。

比如我们Vue项目的vue.config.js配置如下（不需要修改）：
期望能将/api/为前缀的请求全都代理到 http://0.0.0.0:8080/，本地以开发模式运行一切正常，但发布到Nginx后这个代理好像就失效了，api开头的请求都会404错误

module.exports = {
    publicPath: '/',
    devServer: {
      port: 8081,  //访问此项目（VUE项目）的端口
      proxy: {
        '/api': {
          target: 'http://0.0.0.0:8080',
          changeOrigin:true,              //虚拟的站点需要更管origin
          secure: false,                   //是否https接口
          pathRewrite:{
            '^/api':''                    //重写路径
          }
        },
        '/socket': {
          target: 'ws://127.0.0.1:8008',
          // target: 'ws://10.3.0.145:8008',
          changeOrigin: true,             //是否允许跨域
          ws:true,                       //开启ws, 如果是http代理此处可以不用设置
          pathRewrite: {
            '^/socket': ''                //重写
          }
        }
      }
    },
    configureWebpack: {
        devtool: "inline-source-map"
    },
    css: {
        extract: false
    }
};

现在需要对Nginx进行配置，首先我们将编译好之后的dist中的内容，放到Nginx的 /app/front/dist 目录（我自定义的目录），里面应该有index.html这个首页文件。
然后修改Nginx配置为下面这样即可：

location / {
    //根指定为 我们自定义的目录/app/front/dist（自定义的项目目录下）
            root   /app/front/dist;            
            # 此处的 @router 实际上是引用下面的转发，否则在 Vue 路由刷新时可能会抛出 404
            try_files $uri $uri/ @router;
            
            index  index.html index.htm;
        }
        
        # 由于路由的资源不一定是真实的路径，无法找到具体文件
        # 所以需要将请求重写到 index.html 中，然后交给真正的 Vue 路由处理请求资源
        location @router {
          rewrite ^.*$ /index.html last;
        }
        
        # 关键步骤，这里表示将所有的 /api/ 开头的请求都转发到下面 proxy_pass 指定的链接中
        # 为了防止在访问页面时请求就被 Nginx 代理转发，这里需要更具体的配置，才能和前端访问请求区分开
         location /api/ {
          # 后端的真实接口
          proxy_pass http://0.0.0.0:8080/;
          proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
          #for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
    }

Vue代码不做任何改动，只需对Nginx进行与Vue中一样的代理配置即可解决代理请求404的问题，然后重启即可（./nginx -s reload）

 

如下图所示配置Nginx。