vue代理常用配置

Posted 嘿起屁儿整

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue代理常用配置相关的知识,希望对你有一定的参考价值。

代理配置:

1、不加pathRewrite,代理会将web拼接在target后面(即访问:http://11.22.33.44/web)
 '/web': 
        target: 'http://11.22.33.44',
        changeOrigin: true,
        ws: false
 ,
 
2、加上pathRewrite,代理会将web替换后拼接在target后面(即访问:http://11.22.33.44/local-test/web)
 '/web': 
        target: 'http://123.222.33.44',
        changeOrigin: true,
        ws: false,
        pathRewrite:
          '^/web':"/local-test/web/"
        ,
 ,
3、可以写多个配置项,区分接口地址、图片服务器地址等
即访问:http://11.22.33.44/web
 '/web': 
        target: 'http://11.22.33.44',
        changeOrigin: true,
        ws: false
 ,
 即访问:http://11.22.33.44/web/bd
 '/web/bd': 
        target: 'http://11.22.33.44',
        changeOrigin: true,
        ws: false
 ,

图片地址

依旧需要代理访问服务器图片


图片配置:
<img :src="'/web/'+url后缀" />
代理配置:--即在线图片地址:http://11.22.33.44/web/url后缀(可浏览器直接打开)
'/web': 
        target: 'http://11.22.33.44',
        changeOrigin: true,
        ws: false
,

上传文件/图片

依旧需要代理到 后端接口。然后后端再存到线上服务器如oss

上传配置:
<el-upload 
	:headers:authxxx:xxxx
	:action:"/web/upload"
	...
></el-upload>
代理配置: --即上传完整接口地址:http://11.22.33.44/web/upload
'/web/upload': 
        target: 'http://11.22.33.44',
        changeOrigin: true,
        ws: false
,

导出文件

依旧可以配置代理拿到服务器文件

导出配置:
exportfile(参数).then(res=>
	 		var a = document.createElement('a')
	 		//导出的全地址。这里是线上路径。可以改为本地存放路径。
            //a.href = window.location.origin + res.fileUrl 
            //根据需要配置代理。
            a.href= '/download/'+res.fileUrl
            a.download = res.originalFileName //导出的文件名
            a.click()
)
代理配置:
即线上文件的地址为:http://11.22.33.44/download/返回后半截地址
'/download': 
        target: 'http://11.22.33.44',
        changeOrigin: true,
        ws: false
,

以上是关于vue代理常用配置的主要内容,如果未能解决你的问题,请参考以下文章

vue配置反向代理 devServer配置proxy

Vue配置代理 解决跨域

vue-cli 配置服务端口反向代理

vue3.2 基础及常用方法

vue3中的配置代理

vue项目nginx必备配置-----API 接口代理