vue-cli项目代理proxyTable配置exclude的方法

关于Vue-CLI项目中Vue-Proxy配置中的路径代理问题

在前端开发中，经常遇到后端接口跨域的问题，特别是在使用vue-cli生成的项目中。今天长沙网络推广想和大家分享关于vue-cli项目代理配置proxyTable中如何配置exclude的方法。以下是对此问题的一个深入，希望能给大家带来帮助。

让我们先理解一下问题的背景。在进行前后端分离开发时，本地开发环境需要访问mock或其他线上接口，这时候可能会出现接口跨域的问题。以vue-cli生成的项目为例，我们需要在config/index.js中配置proxyTable属性来解决这个问题。一般的配置规则看起来像这样：

```javascript

proxyTable: {

'/api': { // 例如我们的API地址前缀为api

target: ' // 目标服务器的地址

}

}

}

```

然而在实际开发中，后端接口可能存在设计不合理的情况，比如所有的接口都在一个命名空间下。这时如果我们直接使用一个统一的代理规则，可能会误代理到一些我们不需要代理的接口（比如模板接口）。这时候就需要用到exclude等更精细的配置规则。但是遗憾的是，vue-proxy本身并不支持exclude功能。那么有没有其他解决方案呢？答案是肯定的。我们可以通过自定义函数来解决问题。具体的做法如下：

在config目录下的index.js文件中找到devServer属性，添加一个proxy属性并配置为一个函数。在这个函数中我们可以自定义代理规则，包括哪些路径需要代理，哪些路径不需要代理等。这样就可以灵活地解决后端接口设计不合理带来的问题。具体的配置示例如下：

```javascript

devServer: {

proxy: function(req) {

var url = req.path; // 获取请求的URL路径

if (url需要代理的接口) { // 根据具体业务逻辑判断是否需要代理

return { target: '后端服务器地址', pathRewrite: {...} }; // 返回代理规则对象进行代理配置

} else { // 如果不需要代理，则直接返回false结束流程即可。不再经过后续的代理处理流程。这样即可实现排除某些路径的代理功能。

return false;

}

}

}

vue-cli项目中的代理配置：深入proxyTable的exclude功能

在最近的vue-cli项目中，我们发现了代理配置中的一个重要部分——proxyTable。这个配置允许我们灵活地设置代理规则，以满足项目的不同需求。今天，我要分享的是如何在这个配置中实现exclude功能。

让我们理解一下proxyTable的基本用法。在文档中，我们看到了如下的匹配规则：

`proxy('', {...})` 匹配任何路径，所有请求都将被代理。

`proxy('/.html', {...})` 匹配以“.html”结尾的任何路径。

`proxy('/api//.html', {...})` 匹配在/api路径下以“.html”结尾的请求。

`proxy(['/api/', '/ajax/'], {...})` 可以组合多个模式。

值得注意的是，这个插件支持exclude功能。以我们上面的例子来说，只要key的值写成类似`['/m/', '!/m/index']`这样的形式就可以了。你是否见过object的key是一个数组呢？不用怀疑，这就是实际的使用方法。

在我们的项目中，之前使用的是vue-cli 2.8.2版本。在这个版本中，代理配置位于`build/dev-server.js`文件中。如果要实现exclude功能，我们需要对代码进行一些修改。原来的代码只考虑了string类型的情况，我们需要将其改为接受数组的形式。

我们可以将原来的代码：

```javascript

// proxy api requests

Object.keys(proxyTable).forEach(function (context) {

var options = proxyTable[context]

if (typeof options === 'string') {

options = { target: options }

}

app.use(proxyMiddleware(options.filter || context, options))

})

```

修改为：

```javascript

// proxy api requests

Object.keys(proxyTable).forEach(function (context) {

var options = proxyTable[context]

if (typeof options === 'string') {

options = { target: options }

} else if (Array.isArray(context)) { // 如果是数组则处理为exclude模式

// 实现exclude逻辑...

} else { // 其他情况默认为正常代理配置

app.use(proxyMiddleware(options.filter || context, options)) // context -> context处理为数组形式（如果需要）

}

})

```这样，你就可以通过传递数组形式的key来实现exclude功能了。具体的配置可以像下面这样：

```javascript

proxyTable:{

'm/,!/m/index':{ // 这里表示除了'/m/index'以外的所有'/m/'路径都会被代理到目标地址

target: '

}

},

``` 这样就实现了在vue-cli项目中的代理配置exclude功能。无论你是使用哪个版本的vue-cli，都可以通过调整proxyTable的配置来实现代理功能的自定义。希望这篇文章能给你带来帮助，也希望大家能多多支持我们的博客。 长沙网络推广与狼蚁SEO携手为你提供更多优质内容！记得关注我们获取更多实时更新哦！以上内容仅是长沙网络推广的分享，希望能给大家一个参考，实际使用还请根据实际情况进行调整。让我们共同期待更多技术创新的分享！同时感谢大家阅读本文，如有任何疑问或建议，欢迎留言交流！让我们共同期待更多的技术分享和学习机会！