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

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

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

问题描述

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

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

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

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

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

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

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

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

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

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

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

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：vue设置代理不起作用问题及解决 - Python技术站