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代理常用配置的主要内容,如果未能解决你的问题,请参考以下文章