Nginx部署前端，单个项目部署和多个项目部署

单个项目的部署

下载nginx包
下载：nginx下载地址

解压nginx包

html是放打包后的文件

conf里的nginx.conf是nginx的配置

vue项目打包

本地的配置：（打包后在nginx的nginx.conf中配置）

打包时注意的配置：（读取静态资源）

设置成发布的地址：

nginx.conf的配置

配置服务名，端口和代理地址

location ^~/dldz/ {
            proxy_pass   http://203.49.10.44:9010/fhzs/;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Headers *;
            rewrite ^(.*)tzlh(.*)$  $1/$2; break;
            index index.html index.htm;

        }

多个项目的部署

nginx解压后在htnl文件夹下建立两个文件夹

vue项目打包

nginx.conf的配置

location / {
            root   html/nb;
            index  index.html index.htm;
        }

        location /lh {
             alias   html/lh;
             try_files $uri $uri/ /lh/index.html;
             index  index.html index.htm;
        }

        location @router {
            rewrite ^.*$ /index.html break;
        }

location ^~/dldz/ {
            proxy_pass   http://220.191.246.54:7010/channel/9by4JHpCmg/;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Headers *;
            index index.html index.htm;

        }

        location ^~/tzlh/ {
            proxy_pass   http://220.191.246.54:7010/channel/9by4JHpCmg/fhzs/;
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Credentials true;
            add_header Access-Control-Allow-Methods *;
            add_header Access-Control-Allow-Headers *;
            # rewrite ^(.*)tzlh(.*)$  $1/$2; break;
            index index.html index.htm;
        }