vue2 代理配置 Proxy

在 Vue2 项目中，代理（Proxy）配置是解决开发环境下跨域问题的常用方案。通过配置代理，可以将前端发起的请求转发到目标服务器，避免浏览器的跨域限制。下面详细介绍 Vue2 中代理模式的配置方法和实战应用

 

  

一、基本配置方式

Vue2 项目通常使用 vue-cli 构建，代理配置主要在 vue.config.js 文件中进行，通过 devServer.proxy 选项实现。

 开发环境下：

    .env.development

VUE_APP_HOST=10.2.33.2

# 接口地址
VUE_APP_BASE_API = 'http://dev-api.example.com'

# 默认
NODE_ENV ='development'

 

新建   hostConfig.json

{
  "host": "0.0.0.0",
  "target": "http://10.2.20.175:8888"
 
}

 

 

 

 

// vue.config.js

import vueConfig from hostConfig.json
module.exports = {

 host: vueConfig.host,
 port: port,
 hot: true,
 open: true,

devServer: { // 开发服务器端口 port: 8080, // 代理配置  
      proxy: { 
       // 匹配所有以 '/api' 开头的请求路径     
        [process.env.VUE_APP_BASE_API]: {      ---如果偷懒 此处可以 写死

        target: vueConfig.target, // 目标服务器地址    --如果偷懒，此处可以写死
        changeOrigin: true, // 开启跨域
        pathRewrite: {
          ['^'+process.env.VUE_APP_BASE_API]: '' // 重写路径，去掉请求路径中的 '/api'     --如果偷懒，此处可以写死
        }
      }
    }
  }
}