Nginx配置反向代理；vue打包上线处理

前言：

当我们把vue项目打包放到服务器上之后，打开项目发现接口会报错，小伙伴们都会想，明明vue配置了代理啊。其实这时候就跟vue没多大关系了，需要nginx配置反向代理

一：打开nginx>conf>nginx.conf

修改80端口的配置文件

server {
        listen       80;
        server_name  localhost;  // 这里是你服务器绑定的域名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
        // 设置你访问文件的根目录以及index文件
            root   html;
            index  index.html index.htm;
			try_files $uri $uri/ /index.html;
			
        }
		
		// 设置你访问的接口地址
		location /api/{
            proxy_pass http://localhost:3000/;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }