Vue-CLI 3.x 通过proxy代理功能将请求地址做不同的转发

当axios发送get请求时,本地开发时请求的url和线上运行时一般是不同的,但是上线前修改是有很大风险的。所以可以通过代理功能将get请求的路径做一下设置

一、根目录新建vue.config.js

二、配置如下:

module.exports = {   
    devServer: {
        proxy: {
            '/api':{
                target: 'http://localhost:8080',
                ws:true,
                changOrigin: true,
                pathRewrite:{
                    "^/api":'/mock'
                }
            }
        }
    }
}

这样在组件中axios的get地址就可以写 

axios.get('/api/index.json')

这样在开发环境中,/api/index.json 就相当于请求 http://localhost:8080/mock/index.json