目标:将本地请求http://localhost:9091/api/app/userinfo转发到
http://10.101.80.131:3001/app/userinfo地址
在vuecli3的目录结构中,代理配置是在vue.config.js文件中进行配置

 devServer: {
    host: "0.0.0.0", //指定使用一个 host。默认是 localhost,这里默认值即可
    port: 9091, //指定端口
    hot: true, // 开启热更新
    https: false, // 是否开启https模式
    proxy: { // 请求代理服务器
      '/api': { //带上api前缀的
        target: 'http://10.101.80.131:3001', //代理目标地址
        changeOrigin: true,
        secure: false,
        pathRewrite: { // 在发出请求后将/api替换为''空值,这样不影响接口请求
          '^/api': ''
        }
      }
    }
  },

在这里插入图片描述
axios实例 baseURL 属性设置 ‘/api’ 即可让所有的请求地址带上/api/…的路径,此时即可代理
或者这样:
在这里插入图片描述

vue-cli3代理配置注意:
**1、**不能设置本地路径读取操作如:
我的接口前缀都是从.env.development中读取的
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这样的操作可以将所有的接口前缀路径都提取到一个文件夹统一管理,但是在代理中却不能出现,不然会报错。
解决方式只需注释掉配置路径即可:
在这里插入图片描述
**2、**接口请求结构
在这里插入图片描述
代理配置成功之后,接口的路径同样是没有改变的,如:请求前缀为本地地址加上/api路径,但是请求确实是成功的,所以不要认为路径没变成 http://10.101.80.131:3001/app/userinfo 就是错的,代理请求路径不会变成理想中的状态。

第二种方式:

由于项目结构的不同,因此有时候会出现无论怎么设置怎么寻找vue.config.js中的代理设置就是不成功,因此可以换一种方式来进行。
windows下本地安装nginx当作代理服务器来帮助请求。
第一步:
下载nginx的Windows版本,然后解压到自己的C盘或D盘中如:
在这里插入图片描述
第二步:
修改配置文件
在这里插入图片描述
在解压的文件夹中找到cof/nginx.conf文件,然后使用记事本打开
找到以下内容:
在这里插入图片描述
将端口号改成另外一个如:8001
在这里插入图片描述
保存之后,使用cmd进入到命令行窗口并且进入到该文件夹中如:
在这里插入图片描述

错误命令之一
在这里插入图片描述
解决方法
https://www.cnblogs.com/tudou1179006580/p/11124154.html
错误命令之二
在这里插入图片描述
解决方法
这种情况产生的原因是使用powershell但是没有管理员权限,要么使用管理员权限打开powershell,要么直接通过cmd进入到该目录。

进入到对文件夹后使用命令

start nginx

然后打开浏览器输入:http://localhost:8001
显示如下:
在这里插入图片描述
安装成功!,现在是最简单的内容配置。
第三步:
配置跨域请求项:
在这里插入图片描述
vue项目处理配置axios
在这里插入图片描述

nginx命令附录
//查看帮助信息
nginx -h
//查看nginx版本(小写字母v)
nginx -v
// 除版本信息外还显示配置参数信息(大写字母V)
nginx -V
//启动nginx
start nginx
//指定配置文件启动nginx
start nginx -c filename
//关闭nginx,完整有序的停止nginx,保存相关信息
nginx -s quit
// 关闭nginx,快速停止nginx,可能并不保存相关信息
nginx -s stop
// 重新载入nginx,当配置信息修改需要重新加载配置是使用
nginx -s reload
//重新打开日志文件
nginx -s reopen
//测试nginx配置文件是否正确
nginx -t -c filename

Logo

前往低代码交流专区

更多推荐