Vue脚手架配置-详细代理

方法一：

1.配置服务器端口为8848

const express = require("express");

// 创建服务器
const app=express() 
app.listen(8848,()=>{
    console.log("服务器端口为8848已经开启");

})
app.all("/test1",(req,res)=>{
    res.send({
        name:'test1',
        age:18
    })
    console.log("请求地址"+req.url);
})

2开启服务

 3.vue.config.js配置

module.exports = {
    devServer: {
      proxy: 'http://127.0.0.1:8848'
    }
}

4.App.vue

<template>
  <div id="app">
    <button @click="getServer1">获取服务器数据1</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  methods: {
    getServer1() {
      axios.get("http://127.0.0.1:8080/test1").then(
        (response) => {
          console.log(response.data);
        },
        (error) => {
          console.log(error.message);
        }
      );
    },
    },
  },
};
</script>

<style></style>

5.页面展示

 6.注意：

1.优点：配置简单，请求的资源直接发送8080端口就行了。

2.缺点：不能配置多个代理，不能灵活控制走不走代理。

3.工作情况：请求了前端不存在的情况下，才会走服务器。

方法二：

1.配置两个服务器

const express = require("express");

// 创建服务器
const app=express() 
app.listen(8848,()=>{
    console.log("服务器端口为8848已经开启");

})
app.all("/test1",(req,res)=>{
    res.send({
        name:'test1',
        age:18
    })
    console.log("请求地址"+req.url);
})

const express = require("express");

// 创建服务器
const app=express() 
app.listen(8849,()=>{
    console.log("服务器端口为8849已经开启");

})
app.all("/test2",(req,res)=>{
    res.send({
        name:'test2',
        age:18
    })
    console.log("请求地址"+req.url);
})

2.依次开启服务器

  3.vue.config.js

  module.exports = {
     devServer: {
    proxy: {
      // 请求前缀，如果前缀是/good,就开启代理
      '/good1': {
        target: 'http://127.0.0.1:8848',
        // 为了不把前缀发送到服务器请求
        pathRewrite:{'^/good1':""},
        // ws: true,  //websocket
        changeOrigin: true //默认为true，用于控制请求中的host值
      },
      '/good2': {
        target: 'http://127.0.0.1:8849',
        // 为了不把前缀发送到服务器请求
        pathRewrite:{'^/good2':""},
        // ws: true,  //websocket
        changeOrigin: true //默认为true，用于控制请求中的host值
      }
    }
    }
}

4.App.vue

<template>
  <div id="app">
    <button @click="getServer1">获取服务器数据1</button>
    <button @click="getServer2">获取服务器数据2</button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "App",
  methods: {
    getServer1() {
      axios.get("http://127.0.0.1:8080/good1/test1").then(
        (response) => {
          console.log(response.data);
        },
        (error) => {
          console.log(error.message);
        }
      );
    },
    getServer2() {
      axios.get("http://127.0.0.1:8080/good2/test2").then(
        (response) => {
          console.log(response.data);
        },
        (error) => {
          console.log(error.message);
        }
      );
    },
  },
};
</script>

<style></style>

5.页面展示：

 6.说明：

1.优点：可以配置多个代理，灵活控制请求是否走代理。

2.缺点：配置前缀稍微复杂!