Vue爬坑之vue cli 3.x 配置Axios(proxyTable)代理

vue cli 3.x 版本对整个项目的构建都有很大的改动，没有原先的config文件夹，没有dev.env.js和prod.dev.js，我们要对webpack做配置，需要自己手动在项目根目录创建一个vue.config.js文件

比如我们在组件中想通过axios请求一个api，mock数据在我们本地的public/static/mock下面的index.json文件中：(注意vue cli3里面已经不能访问和src平级的static目录里面的本地静态资源了，全都迁移到了public目录中，也就是之前和src目录平级的static文件夹移动到public目录中就可以正常访问了。比如此时我们可以通过浏览器http://localhost:8080/static/mock/index.json来访问本地的index.json文件)

这样是可以得到数据的：

但是如果我们要通过下面这种api形式的请求访问，就肯定不行

所以我们需要一个请求的转发机制，vue-cli3里面需要我们在vue.config.js里配置：

const path = require('path')
module.exports = {
    
    
    devServer: {
    
    
        proxy: {
    
    
            '/api': {
    
    
                target: 'http://localhost:8080',
                pathRewrite: {
    
    
                    '^/api': '/static/mock'
                }
            }
        }
    }
}

配置好以后保存，然后需要重启服务，就可以了