vue-admin-template反向代理设置

在vue-admin-template中，反向代理设置可以在`vue.config.js`文件中进行配置。具体步骤如下：

1. 在项目根目录下创建`vue.config.js`文件。
2. 在该文件中添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 代理api
        target: 'http://localhost:8080', // 代理服务器地址
        changeOrigin: true, // 是否跨域
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
}

3. 修改代理api的路径，例如原本请求的路径为`http://localhost:8080/api/login`，现在需要代理到`http://localhost:3000/login`，则需要将`pathRewrite`中的配置修改为：

pathRewrite: {
  '^/api': '/login'
}

4. 保存`vue.config.js`文件，并重新运行项目即可生效。

需要注意的是，修改完配置后需要重新启动项目，否则配置不会生效。另外，如果需要代理多个api，可以在`proxy`对象中添加多个配置。

相关问题

vue-admin-template配置反向代理，浏览器说找不到页面

如果在配置了反向代理后，浏览器提示找不到页面，有可能是以下原因：

1. 配置的代理地址不正确，需要确认代理地址是否正确。

2. 代理服务器没有启动，需要确认代理服务器是否已经启动。

3. 代理服务器返回的响应不正确，需要确认响应是否正确。

4. 路由配置不正确，需要确认路由配置是否正确。

5. 页面地址不正确，需要确认页面地址是否正确。

可以根据以上原因逐一排查，找到问题所在并进行修改。

vue-admin-template反向代理配置以后不生效

可能是反向代理配置有误。请检查以下几个方面：

1. 在 `vue.config.js` 中是否正确配置了反向代理，例如：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

其中 `target` 是你要代理的目标地址，`changeOrigin` 控制是否改变请求头中的 `host`，`pathRewrite` 控制重定向路径。

2. 在请求时是否使用了正确的路径，例如：

axios.get('/api/user') // 正确
axios.get('/user') // 错误

3. 是否需要重启 dev server 才能生效。如果修改了 `vue.config.js`，需要重启 dev server。

如果以上步骤都检查无误，仍然不生效，可以尝试在浏览器的开发者工具中查看请求的响应，看看是否有错误信息。