vue-cli在本地开发环境的项目在获取后端动态资源路径的时候经常遇到这样这样的情况:
后端返回的是相对路径:
那么这时候在本地测试环境得到的路径就变成了:
如果在请求后拼接上域名,比如:http://abc.com/你的获取到的资源相对路径 是可以,但是打包上传后,在服务端最好用相对路径来显示会比较灵活。万一域名改变就不用再更改域名,链接资源如果多的话工作量会的很庞大,
那么如何在本地开发也能访问这些资源,并且在项目打包的时候在不添加域名的情况下以相对路径打包呢?
在webpack.dev.config.js添加如下配置,正常的项目配置文件应该是在:config/index.js
在其中的dev
对象里面找到:proxyTable: {}
proxy: {
'/upload': { //这里为后端存放资源的一级路径(根据你后端返回的来定),我这里是第一个图片url里面的的“/upload”
target: 'http://abc.com/', //这里填写后端存放资源文件的域名
},
}
这里为这个路径做了一个域名代理,只要匹配到"/upload"(我这里后端是这个)这种路径下的链接请求,都会从例如:http://localhost:8080/upload/register/1557825470749.jpg
代理到
http://abc.com/upload/register/1557825470749.jpg
这时候本地资源文件就能正常访问了,并且打包上传后还是相对路径。
如果后端存放资源的一级路径不固定(也即是没有像我图1那样每次都带有“/upload”)那么这里要做一个路径重写,每次请求到的路径都拼接上一个"/upload"你可以自定义。具体就不再阐述pathRewrite怎么去写
webpack代理设置请参阅:https://webpack.js.org/configuration/dev-server/#devserver-proxy
有用的配置教程视频:https://ke.qq.com/course/350693?tuin=undefined&taid=2704450712328677
proxy: {
'/upload': { //这里为后端存放资源的一级路径(根据你后端返回的来定),我这里是第一个图片url里面的的“/upload”
target: 'http://abc.com/', //这里填写后端存放资源文件的域名
//路径重写
pathRewrite: {
'^/upload': ''
},
},
}