1.使用vue.config.js文件配置代理:
在Vue项目的根目录下创建一个vue.config.js文件,并添加以下代码:
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}
devServer配置项来配置代理服务器。其中proxy属性用于配置代理的规则,/api表示需要代理的接口路径。target属性表示代理的目标服务器地址,changeOrigin属性表示是否改变请求的源地址,pathRewrite属性用于重写请求的路径。
2. 使用http-proxy-middleware库配置代理:
在Vue项目的根目录下创建一个vue.config.js文件,并添加以下代码:
const proxyMiddleware = require('http-proxy-middleware');
module.exports = {
devServer: {
before(app) {
app.use(
'/api',
proxyMiddleware({
target: 'http://api.example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
})
);
}
}
}
http-proxy-middleware库来配置代理服务器。在before方法中,通过app.use方法来使用代理中间件。'/api'表示需要代理的接口路径,target属性表示代理的目标服务器地址,changeOrigin属性表示是否改变请求的源地址,pathRewrite属性用于重写请求的路径。
3.使用axios库的代理配置:
如果项目中使用了axios库来发送请求,可以直接在axios的配置中配置代理。在项目的入口文件(比如main.js)中添加以下代码:
import axios from 'axios';
axios.defaults.baseURL = '/api';
axios.defaults.proxy = {
host: 'http://api.example.com',
port: 80,
protocol: 'http'
};
axios.defaults.baseURL表示请求的基础路径,axios.defaults.proxy表示代理的配置,包括代理服务器的地址、端口和协议。