vue设置代理不起作用问题及解决

针对"vue设置代理不起作用问题及解决"，我会给出完整的攻略，包括以下内容：

1. 问题描述；
2. 解决思路；
3. 具体操作流程；
4. 验证代理是否设置成功。

接下来，我们一步步来详细讲解。

问题描述

在Vue项目开发中，我们有时需要请求其他服务器的数据，而这个请求的服务器还没有部署到正式环境，但我们有这个服务器的开发环境可以使用。此时，我们需要通过代理的方式进行访问，否则就会出现跨域的问题。

在Vue的开发环境下，使用vue.config.js来配置代理，但在有些情况下，无法正常的启用代理，导致无法访问代理的API数据。

解决思路

Vue设置代理不起作用的原因是因为Vue的配置需要根据实际情况实时变更才能生效，即 Vue 的配置文件需要重新编译才能生效，如果没有重新编译则无法访问代理API数据。

解决Vue设置代理不起作用的问题，需要重新编译 Vue 的配置文件，一般需要重新运行一下 npm run serve 命令。

具体操作流程

下面给出两个示例说明来帮助大家更好的理解。

示例一

1. 打开你的 vue.config.js 文件；如果没有，则在项目根目录下新建这个文件。
2. 输入以下代码，配置你的代理设置

module.exports = {
    devServer: {
          proxy: "http://localhost:3000"
    }
}

1. 运行你的Vue项目：npm run serve。
2. 在你的 Vue 项目中访问代理 API 数据，例如 http://localhost:3000/api/data。
3. 当我们在项目代码中访问代理的 API 数据时，如果你发现404错误，那么很有可能是代理设置未生效，此时可以按照如下步骤重新编译 Vue 配置文件：
   • 在终端中通过Ctrl + c停止当前运行的 npm run serve 命令；
   • 重新运行 npm run serve 命令。

示例二

1. 继续使用示例一中的代理设置文件 vue.config.js。
2. 在打开的终端窗口中运行 npm run serve 命令。
3. 打开Chrome浏览器并访问你的网站地址，如 http://localhost:8080。
4. 当你在项目代码中访问代理的 API 数据时，如果你发现404错误，那么按照如下步骤重新编译 Vue 配置文件：
   • 在终端中通过Ctrl + c停止当前运行的 npm run serve 命令；
   • 重新运行 npm run serve 命令。
5. 确认代理是否设置成功。 如重新运行 npm run serve 命令后，执行 API 请求能成功返回数据，证明代理设置成功。

验证代理是否设置成功

如果你按照上述步骤重新编译 Vue 配置文件，但在项目代码中访问代理的 API 数据时仍然出现问题，可以执行以下操作验证代理是否设置成功：

1. 在你的 Vue 项目中，加入以下代码：

mounted () {
    this.$http.get('/api/data').then((res) => {
        console.log(res.data);
    })  
}

1. 运行你的 Vue 项目：npm run serve。
2. 打开Chrome浏览器并访问你的网站地址，如 http://localhost:8080。
3. 打开控制台，查看是否控制台输出了代理上的数据。

如果输出了代理数据，则说明代理设置成功；如果没有输出，则说明设置代理失败，你需要重新查看代理设置是否正确。