nginx中部署vue项目，以及配置后台反向代理和图片回显功能

一，部署前端项目

1. 新建一个目录，用于存放打包后的dist下的文件
2. 打开nginx的conf文件，进行配置，配置内容如下

   server
           {
                   listen 7995;
                   server_name localhost;
   
                   root /usr/local/Mes/web/admin; //前端打包文件目录
   
                   location / {
                           try_files $uri $uri/ @router;
                           index index.html index.htm;
                   }
   
   
                   location @router{
                           rewrite ^.*$ /index.html last;
                   }
   }
   
   
   //这样直接访问ip:7995即可访问到前端页面，也就部署好了

 二，配置后台接口的反向代理

 

  server
        {
                listen 7996;
                server_name localhost;

                location  /prod-api/ {
            proxy_pass http://133.45.44.44:8080/;
        }
}

//这样的写法代表着当访问ip:7995/prod-api/app时，会映射到地址http://133.45.44.44:8080/app上，
注意：proxy_pass 后的地址路径最后加/,则不会拼接prod-api，不加的话，映射的路径上就会加上prod-api

三，配置图片回显反向代理

  server
        {
                listen 7996;
                server_name localhost;
           //配置方式有两种，一种是路径匹配，一种是后缀匹配

        location ~ /file/img/ {
		 root /home/file/img/;
	     autoindex on;
    } 
          或

    
        location ~.*(file).(img|images)*\.(gif|jpg|jpeg|png)$ {
		 root /home/file/img/;
	     autoindex on;
    } 

          
}

//这里注意，图片的回显功能和其他的功能略有不同，包括第一种的路径匹配方式，它会把匹配的url拼接到
你下边的图片路径后边，去找个路径下寻找，例如http://ip:7996/file/img/a.jpg，相当于到/home/file/img/file/img下边去找a.img的图片