English
资源说明：在开发Vue.js应用程序时，经常会遇到因跨域问题导致的请求失败。为了解决这个问题，Vue CLI 3.0 提供了一个便捷的解决方案——通过`proxy`配置进行代理转发。本文将详细介绍如何在Vue CLI 3.0环境中设置并使用`proxy`，以便于在开发阶段顺利地进行API请求。
我们需要在Vue项目的根目录下创建一个名为`vue.config.js`的文件，这是Vue CLI 3.0引入的新特性，用于存放项目配置。在这个文件中，我们将定义`devServer`选项，它是开发服务器的相关配置，其中的`proxy`属性用于设置代理转发。
以下是一个基本的`vue.config.js`配置示例：
```javascript
module.exports = {
lintOnSave: true, // 在保存时自动执行ESLint代码检查
devServer: {
proxy: {
// 将所有以'/api'开头的请求代理到'http://localhost:8080'
'/api': {
target: 'http://localhost:8080', // 目标服务器地址
changeOrigin: true, // 设置为true，使得请求看上去像是直接来源于目标服务器
pathRewrite: { // 路径重写，将'/api'替换为'/mock'
'^/api': '/mock'
}
}
}
}
}
```
在这个配置中，`'/api'`是代理的触发路径，当你的应用发出以`/api`开头的HTTP请求时，Vue CLI的开发服务器将会把这些请求转发到`http://localhost:8080`。`changeOrigin`设置为`true`意味着在响应头中，`Host`字段会更改为目标服务器的地址，这样可以避免因跨域问题导致的错误。`pathRewrite`则允许我们修改请求路径，这里我们将`/api`替换为`/mock`，这意味着实际发送的请求会是`http://localhost:8080/mock`。
这样设置后，你可以在Vue应用中像这样发起请求：
```javascript
axios.get('/api/users') // 实际请求的是'http://localhost:8080/mock/users'
```
这样做的好处在于，你无需在开发环境中更改任何API调用代码，只需在部署生产环境时，将API地址替换为实际的线上地址即可。
总结来说，Vue CLI 3.0的`proxy`配置提供了一种简单的方法，帮助开发者在开发环境中绕过跨域限制，实现前端与后端API的本地联调。通过在`vue.config.js`中正确设置`proxy`，你可以将特定路径的请求转发到指定的服务器，从而方便地处理开发过程中的数据交互。这种方法不仅简化了开发流程，还提高了开发效率。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
