脚手架构建代理服务器

以斗鱼为例：

vue.config.js代码

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  // 如果改字段为true 接着去查看package.json的browserlist是否在低级浏览器范围内，如果处于低级浏览器范围内，
  // 会把node_modules下载的第三方的高级写法进行babel转换。
  // 如果字段设置为false，会把node_modules第三方的高级代码段原封不动的进行打包，导致低级的浏览器访问报错的问题
  transpileDependencies: true,
  publicPath:"/",  // 启动页的地址
  outputDir:"dist",  // 打包之后的文件名
  lintOnSave:false, // 保存的时候是否检查语法

  // 开发环境服务器配置
  devServer:{
    open:true, // 浏览器可以自动打开
    host:"localhost", // 配置主机地址
    port:"8080", // 配置端口号
    // 配置代理服务器
    proxy:{
      // 属性值是发请求时为路径添加的路径前缀
      // http://m.douyu.com/api/room/list?page=10"
      // /myDouyu一般会加在服务器地址的后面   /myDouyu/api/room/list?page=10
      "/myDouyu":{
        target:"http://m.douyu.com/",  // 目标服务器地址
        pathRewrite:{
          "^/myDouyu":""  // 路径重写
        },
        changeORigin:true // 实现跨域 改变请求源
      }
    }
  }
})

 在路由组件的created方法中请求

export default {

    data() {

    },

    mounted() {
        
    },

    methods: {
        
    },
    created() {

        // 配置代理服务器进行解决跨域  在vue.config.js进行配置
        fetch("/myDouyu/api/room/list?page=10").then(res=>{
            return res.json()
        }).then(res=>{
            console.log(res);
        })
    },
};