nginx代理

一、什么是代理（njinx）

1、正向代理

2、反向代理

二、存放路径和下载

nginx作用：隐藏真实服务器，负载均衡，缓存....

网址：http://nginx.org/en/download.html

下载第二项稳定版（下载完毕之后是一个压缩包）

nginx的存放路径不能有中文

1.在系统盘的根目录下解压 D：/nginx..版本好../nginx..版本号../

2.进入到第二层 nginx文件夹下 在终端中打开

3.启动nginx: =》start nginx   (只要不报错就是正确执行了指令)

  快速停止指令：nginx.exe -s stop =》.\nginx.exe -s stop

  重载 ：nginx.exe -s reload  ==》.\nginx.exe -s reload

  查看版本号：nginx -V

  正常停止 |关闭：nginx -s -quit

三、在nginx.conf下配置文件

1、监听端口和本机

server {
listen       80;//监听顿口
server_name  localhost;//访问路径
}

2、访问资源的路径（可以修改）

a）默认配置

 location / {
            root   html;//访问路径
            index  index.html index.htm;//访问文件名
        }

c）访问时整个页面显示

 location / {
            root   html;
            autoindex on;//显示整个html文件下的目录
        }

d）反向代理百度网页和qq两个网页

location /baidu/ {//代理百度
proxy_pass https://www.baidu.com/
}
location /qq/ {//代理qq
proxy_pass https://www.qq.com/
}

四、在服务器中设置反向代理

1、需要对代理服务器进行配置

启用命令：npm i --save-dev http-proxy-middleware

2、app文件引入并配置

// 代理配置
const {createProxyMiddleware}=require('http-proxy-middleware')
//应用代理配置
const proxy=createProxyMiddleware({
  target:'http://localhost:8888',//本服务器想访问的端口
  changeOrigin:true
})
//使用
app.use("/",proxy)

设置代理后访问这个网页的信息返回的是本网页代理的信息

五、在vue中设置代理

1、在api文件夹下新建index.js文件并进行配置

const http="http://localhost:8888/"

const globalAPI={
    myhttp:http,
    //产品列表
    product:http+"product.do",
    //详情页
    productdetail:http+"productdetail.do"
}
export default globalAPI;

2、在main.js文件引入做全局配置

import globalAPI from "@/index";

//设置代理
Vue.prototype.globalAPI=globalAPI

3、发送请求时请求端口发生变化

this.$axios.get(this.globalAPI.product)//this.globalAPI.product 改变
        .then((resp)=>{
          // 请求成功之后的回调函数

          if(resp.status==200){
            this.productArr=resp.data;
          }
        })

注意：图片文件路径也发生了变化

4、打包前vue.config.js文件发生变化

publicPath:process.env.NODE_ENV==="production"?".../../":"/",

5、在nginx.conf下配置文件

    location / {
          root   html/dist;
         index  index.html index.htm;
    #try_files $url $url/ @router;
    }
    location @router {
    rewrite ^.*$ /index.html last;
    }