vue2.0 配置反向代理

1. 找到config/index.js文件
2. 找到dev下面的 proxyTable:{}写入代码：

 proxyTable: {
      //定义/controller/*,注：controller叫什么都可以，但是下面要统一，'*'号必须要加
      "/controller/*": {
        //将http://127.0.0.1:8088/印射为/controller
        target: "http://127.0.0.1:8089/", //跨域地址后台服务器地址
        changeOrigin: true, //是否跨域
        // secure: false, //是否使用https
        pathRewrite: {
           //匹配以/api为开头的请求地址，并使用/controller替换替换成‘/XXX’，
          "^/api": "/XXX" 
        }
      }
    },

3. 修改request请求文件

var service = axios.create({
//   baseURL: process.env.BASE_API,//本地调试
  baseURL: "/controller/", // api的base_url
  timeout: 30000, // request timeout,
  method: "post"
});

 ‘/controller/‘运行以后'/controller/'会被替换成http://127.0.0.1:8089/

 

4.重新运行：yarn dev，运行成功。

注意：改配置只能本地运行时生效，打包发布以后还不能使用反向代理，VUE配置反向代理需要配置nginx。

5.配置nginx反向代理

6.安装nginx：nginx Windows 发布安装

7.Vue nginx 发布：Vue nginx 发布

8.配置nginx文件：打开nginx.conf文件

server {
        listen       8089;
        server_name  localhost;
 
 	    location / {
            root   D://nginx-1.18.0/html/dist;
            index  index.html index.htm;
        }
 
        //配置反向代理'/controller/'和request文件中的链接配置成一致
        location /controller/ {
	        proxy_set_header Host $host;
            proxy_set_header x-forwarded-for $remote_addr;
            proxy_set_header X-Real-IP $remote_addr;
            //配置反向代理IP地址和request文件中的链接配置成一致
            proxy_pass http://127.0.01:8090/;
        }
        
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

做到这步就大工告成!