English
资源说明：在Vue CLI 3中，开发过程中常常需要配置代理来解决跨域问题，使得前端应用能够与后端API接口进行通信。然而，有时按照常规方法配置`proxy`后，可能会遇到代理无效的情况。本文将详细解释如何正确配置Vue CLI 3的`proxy`代理，并解决配置无效的问题。
打开`vue.config.js`文件，这个文件是Vue CLI 3自动生成的配置文件，用于定义项目的特定设置。如果没有这个文件，可以在项目根目录下创建一个。
在`vue.config.js`中，我们需要关注`devServer`对象，它包含了开发服务器的相关配置。`proxy`属性用于设置代理，将前端的HTTP请求转发到指定的后端服务器。例如，以下是一个基本的配置示例：
```javascript
module.exports = {
devServer: {
proxy: "http://127.0.0.1:8081",
port: 8085
}
};
```
在这个例子中，所有向`/api/*`的请求（默认情况下）都将被代理到`http://127.0.0.1:8081`，而前端应用则运行在`localhost:8085`上。请注意，这里的关键是不要添加额外的配置选项，如`changeOrigin`或`pathRewrite`，除非你有特定的需求。如果这些选项已经导致了问题，尝试去掉它们，保持配置尽可能简洁。
如果你的API请求没有被正确代理，可能的原因有：
1. **配置错误**：确保`proxy`的值是正确的后端服务器地址，包括协议（http或https）、主机名和端口。
2. **请求路径不匹配**：默认情况下，Vue CLI 3会将所有非静态资源的请求代理出去。如果你的请求URL需要特殊处理，可以使用`path`属性来指定。
例如，如果你的API请求路径是`/my/api/*`，可以这样配置：
```javascript
module.exports = {
devServer: {
proxy: {
'/my/api': {
target: 'http://127.0.0.1:8081'
}
},
port: 8085
}
};
```
3. **端口冲突**：确保你的前端服务器端口（`port`）与后端服务器端口不同，以防止端口占用问题。
4. **跨域限制**：虽然`proxy`可以解决开发环境中的跨域问题，但实际生产环境中，你需要在后端设置CORS（Cross-Origin Resource Sharing）策略。
在axios库中发送请求时，不需要为URL添加前缀，如`/api`，因为`proxy`会自动处理。例如：
```javascript
import axios from 'axios';
axios.get('/users')
.then(response => {
console.log(response.data);
})
.catch(error => {
console.error(error);
});
```
另外，如果你在`vue.config.js`中还看到了`configureWebpack`的配置，这部分通常用于添加webpack插件，比如`ProvidePlugin`，它可以全局注入依赖，例如jQuery。这段代码表示在所有模块中都可以直接使用`$`, `jQuery`和`window.jQuery`：
```javascript
const webpack = require('webpack');
module.exports = {
// ...
configureWebpack: {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery"
})
]
}
};
```
当遇到Vue CLI 3的`proxy`代理无效时，首先要检查配置是否正确，然后排查端口、请求路径和跨域设置。如果仍然无法解决问题，可能需要查看浏览器的开发者工具网络面板，检查请求是否被正确发送以及返回的响应。通过这种方式，你可以更深入地了解问题所在，并找到解决办法。
本源码包内暂不包含可直接显示的源代码文件，请下载源码包。
