Vue - 脚手架配置代理

如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过 vue.config.js 中的 devServer.proxy 选项来配置。

实现方式#

方式一#

在vue.config.js中添加devServer:{}

module.exports = {
    pages:{
        index:{
            //入口
            entry: 'src/main.js'
        },
    },
    lintOnSave:false,  //关闭语法检查
     devServer:{
         proxy:'http://localhost:5000'
     },

组件使用axios获取数据

<script>
import axios from 'axios'
export default {
  name: "Student",
  methods:{
    getInfo(){
      axios.get("http://localhost:8080/student").then(
          response => {
            alert(response.data);
          },
          error => {
            alert("请求失败");
          }
      )

    }
  }
}
</script>

优点：配置简单，请求资源时直接发给前端（8080）即可。
缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
工作方式：若按照上述配置代理，当请求了前端不存在的资源是（public目录下的资源）,那么该请求才会转发给服务器（优先匹配前端资源）。

方式二#

配置vue.config.js

module.exports = {
    pages:{
        index:{
            //入口
            entry: 'src/main.js'
        },
    },
    lintOnSave:false,  //关闭语法检查
    devServer:{
        proxy:{
            '/hzc':{ //匹配所有以 '/hzc' 开头的请求路径
                target:'http://localhost:5000', //代理目标的基础路径
                pathRewrite:{'^/hzc':''},
                ws:true, //用于支持websocket
                changeOrigin:true //用于控制请求头中的host值，默认值为true；
                //changeOrigin=true时，服务器收到的请求头host为8080；
                //changeOrigin=false时，服务器收到的请求头host为5000
            }
        }
    }
}

优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
缺点：配置略微繁琐，请求资源时必须加前缀。axios.get("http://localhost:8080/student").then(）