Vue配置文件vue.config.js配置前端代理方式

当我们在开发Vue项目时，有时候需要通过前端代理方式来解决跨域的问题。在Vue项目中实现前端代理的方式有很多种，本文将详细介绍如何通过配置Vue的配置文件vue.config.js实现前端代理方式。

vue.config.js文件

vue.config.js是一个可选的配置文件，如果项目的根目录中存在该文件，则该文件会被@vue/cli-service自动加载。该文件需要导出一个对象或一个函数，用于设置webpack的配置项，以及其他一些项目相关的配置。在该文件中，我们可以通过配置devServer项来实现前端代理。

使用前端代理

具体来说，我们可以通过如下步骤来配置前端代理：

1. 在项目的根目录下创建vue.config.js文件

2. 导出一个对象，在对象中配置devServer项

javascript
module.exports = {
devServer: {
proxy: {
//配置代理服务器
'/api': {
target: 'http://localhost:3000', // 代理服务器的域名和端口号
ws: true, //websocket
changeOrigin: true, // 是否跨域
pathRewrite: {
'^/api': '' // 去掉api路径
}
}
}
}
}

在上述配置中使用了一个代理服务器，将以/api开头的请求代理到http://localhost:3000。

• target：代理服务器的域名和端口号
• ws：是否启用websocket跨域
• changeOrigin：是否跨域

• pathRewrite：代理的路径重写规则

• 在Vue组件中使用代理

在Vue组件中，我们需要将接口请求的前缀改为/api，代理服务器就会将该请求代理到目标服务器。

javascript
axios.get('/api/data').then(res => {
console.log(res.data)
}).catch(error => {
console.log(error)
})

示例一：实现代理服务器

在示例中，我们需要使用一个代理服务器来解决跨域问题。具体代码如下：

// server.js
const express = require('express')
const app = express()

app.get('/api/data', (req, res) => {
  res.json({msg: 'Hello World'})
})

app.listen(3000, () => {
  console.log('Server is running at http://localhost:3000')
})

运行该服务器，访问http://localhost:3000/api/data将会得到{msg: 'Hello World'}的响应。

接下来在Vue项目中，创建vue.config.js文件，配置如下所示：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在Vue组件中使用代理：

axios.get('/api/data').then(res => {
  console.log(res.data)
}).catch(error => {
  console.log(error)
})

运行Vue项目，访问localhost:8080即可在控制台中看到{msg: 'Hello World'}的输出。

示例二：使用代理服务器

在示例中，我们需要使用一个已有的服务器来获取数据，但是该服务器存在跨域问题，需要通过代理服务器来解决。具体代码如下：

// server.js
const express = require('express')
const app = express()

app.use(express.static('public'))

app.use('*', (req, res) => {
  res.json({msg: 'Hello World'})
})

app.listen(3001, () => {
  console.log('Server is running at http://localhost:3001')
})

运行该服务器，访问http://localhost:3001 将会返回{msg: 'Hello World'}。

接下来，在Vue项目中，使用vue.config.js配置代理服务器：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

在Vue组件中调用数据：

axios.get('/api/data').then(res => {
  console.log(res.data)
}).catch(error => {
  console.log(error)
})

运行Vue项目，访问localhost:8080即可在控制台中看到{msg: 'Hello World'}的输出。由于使用代理服务器，请求将会被转发到http://localhost:3001/api，即http://localhost:3001，解决了跨域问题。