Vue脚手架配置代理

在vue.config.js中添加如下配置
方法一：

module.exports = {
  devServer: {
    proxy: 'http://localhost:4000'
  }
}
'
运行
运行

说明

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

方法二：

module.exports = {
  devServer: {
    proxy: {
      '/api': {// 匹配所有以 '/api'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        ws: true,
        changeOrigin: true
        pathRewrite:{'^/api':''} //重写内容
      },
      '/foo': {
        target: ''
      }
    }
  }
}
/*
changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
changeOrigin默认值为true
*/

说明

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理
2. 缺点：配置略微繁琐，请求资源时必须加前缀

实现（单个代理）

准备1. 控制台安装所用的axios
执行：npm i axios
导入：import axios from 'axios'

School.vue

<template>
    <div>
        <button @click="display">请求数据</button>
    </div>    
</template>

<script>
    import axios from 'axios'
    export default{
        name:'School',
        
        methods:{
            display(){
                axios.get('http://localhost:8080/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
               
            }
        } 
       

    }
</script>

配置代理（vue.config.js）

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 这修改过
  lintOnSave:false,
  //===========================
  devServer:{
    proxy:"http://localhost:5000"
  }
})

配置服务器（demo.js）

准备2：控制台安装所用的express模块
执行：npm install express --save

const express = require('express')
const app=express()

app.use((request,response,next)=>{
    console.log('有人请求了服务器');
    console.log('请求资源：',request.url);
    console.log('请求来自：',request.get('host'));

    next()
})

app.get('/students',(request,response)=>{
    const students = [
        {name:'wzm',age:22},
        {name:'lzy',age:19},
        {name:'wy',age:21}
    ]
    response.send(students)

})

app.listen(5000,(err)=>{
    if(!err)
    console.log('服务器启动成功');
})

结果图：

实现（多个代理）
注意点！！！！
School.vue

<template>
   ......   
</template>

<script>
    import axios from 'axios'
    export default{
        name:'School',
        
        methods:{
            display(){
                axios.get('http://localhost:8080/api/students').then(
                //当使用多个配置代理（即方式二），需要在8080后加上 /api,
                //(配合 pathRewrite:{'^/api':''}的使用)
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
               
            }
        } 
       

    }
</script>

拓展：

除axios之外，vue-resource也能实现数据请求
配置相同点：vue.config.js配置相同
配置不同点：需要将School.vue中的axios.get修改成this.$http.get

用法：

插入vue-resource库

npm i vue-resource

main.js文件中加入代码

//引入插件
import vueResource from 'vue-resource'

Vue.use(vueResource)

School.vue中不再导入axios
需要将School.vue中的axios.get修改成this.$http.get