使用nginx反向代理实现vue项目打包部署上线

server {

        listen      80; # 监听端口

        server_name  localhost; # 域名可以有多个，用空格隔开

        #access_log  logs/host.access.log  main;

        location / {

            root  /etc/nginx/html/dist/;    #站点根目录，即网页文件存放的根目录, 默认主页目录在nginx安装目录的html子目录。

            index  index.html index.htm;    #目录内的默认打开文件,如果没有匹配到index.html,则搜索index.htm,依次类推

        }

        #ssl配置省略

        location /api {

            rewrite  ^.+api/?(.*)$ /$1 break;

            proxy_pass  http://192.168.1.100:7001;    #node api server 即需要代理的IP地址

            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;

        }

        #error_page  404              /404.html;    #对错误页面404.html 做了定向配置

        # redirect server error pages to the static page /50x.html

        #将服务器错误页面重定向到静态页面/50x.html

        #

        error_page  500 502 503 504  /50x.html;

        location = /50x.html {

            root  html;

        }

    }