vue dev server配置proxy 正则

在Vue项目中，我们通常会使用Vue CLI提供的开发服务器来调试和运行我们的项目。然而，有时候我们需要与后端API进行通信，而这些API可能是运行在不同的端口或域名上。为了解决这个问题，Vue CLI为我们提供了一个配置项来设置代理(proxy)，这样我们就能够在开发时将请求代理到我们的后端API上。

在Vue项目中配置代理十分简单，在项目根目录下的vue.config.js中添加下面的配置即可：

```javascript

module.exports = {

devServer: {

proxy: {

'/api': {

target: 'http://localhost:3000'

changeOrigin: true

pathRewrite: {

'^/api': ''

}

}

}

}

}

```

上面的配置中，我们设置了一个代理规则，将以'/api'开头的请求代理到'http://localhost:3000'这个地址上。changeOrigin选项表示是否改变请求头中的Origin字段为目标URL的地址，默认为false。pathRewrite选项用来重写路径，这里将请求中的'/api'重写为空字符串，这样请求'/api/users'将被代理到'http://localhost:3000/users'上。

然而，有时候我们需要对不同的API路径设置不同的代理规则，这时候我们可以使用正则表达式来匹配路径。

```javascript

module.exports = {

devServer: {

proxy: {

'^/api(.*)': {

target: 'http://localhost:3000'

changeOrigin: true

pathRewrite: {

'^/api': ''

}

}

'^/auth(.*)': {

target: 'http://localhost:4000'

changeOrigin: true

pathRewrite: {

'^/auth': ''

}

}

}

}

}

```

上面的配置中，我们设置了两个代理规则，***个规则匹配以'/api'开头的路径，并将这些请求代理到'http://localhost:3000'上。第二个规则匹配以'/auth'开头的路径，并将这些请求代理到'http://localhost:4000'上。这样我们就可以根据不同的路径来设置不同的代理规则。

总的来说，在Vue项目中配置代理十分简单，我们可以通过设置devServer.proxy来配置代理规则，通过设置路径和目标地址来实现代理。如果需要对不同的路径设置不同的代理规则，可以使用正则表达式来匹配路径。这样我们就能够轻松地与后端API进行通信，加快开发效率。