vue代理常用配置

Posted 2022-04-19 嘿起屁儿整

代理配置：

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
,