Vue的反向代理配置

小董大咖

于 2022-10-23 22:35:36 发布

阅读量4k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端

本文链接：https://blog.youkuaiyun.com/ddf__/article/details/127482578

本文介绍了如何在Vue项目中配置vue.config.js以设置自定义端口和反向代理，特别是针对以/api开头的请求进行代理到指定服务器。同时，展示了在request.js中使用Axios创建实例，设定基础URL为'/api'，以配合反向代理，并设置了超时时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.首先找到 vue.config.js文件

module.exports = {
  // devServer的配置
  devServer: {
    // 自定义端口
    port: 8888,
    // 自动打开浏览器
    open: true,
    // 用于配置反向代理
    proxy: {
      // 代理请求， 匹配所有以/api开头的请求
      '/api': {
        // 目标服务器，所有以/api开头的请求接口代理到目标服务器
        target: 'http://touxxxxxx.itheima.net/',
        // 重写路径，此时用于匹配反向代理的/api可以替换为空
        pathRewrite: { '^/api': '' },
        // 如果代理到HTTPS服务器需要设置secure为true，默认为false
        secure: true
      }
    }
  }
}

2.在request.js里面配置

const request = axios.create({
  // baseURL: 'http://ttapi.xxxx.itcast.cn/',
  // baseURL: 'http://xxxxxx.itheima.net/',
  // 将所有的请求全部以/api开头，用于匹配反向代理
  baseURL: '/api',
  // 超时， 如果接口超过3000毫秒，直接失败
  timeout: 3000,
  }）