2019-05-14 vue-cli 让远程资源链接(图片、视频、文档等) 在本地开发环境可以访问

vue-cli在本地开发环境的项目在获取后端动态资源路径的时候经常遇到这样这样的情况:
后端返回的是相对路径:

image.png

那么这时候在本地测试环境得到的路径就变成了:
image.png

如果在请求后拼接上域名,比如: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
这时候本地资源文件就能正常访问了,并且打包上传后还是相对路径。

image.png

如果后端存放资源的一级路径不固定(也即是没有像我图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': ''
                },
           },
        }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。