vue开发环境下的前端代理

在开发的过程中，难免会遇到跨域的情况，记录一下vue的前端代理是怎么使用的。

在vue.config.js中devServer配置，格式如下

module.exports = {
     
  devServer: {
     
    proxy: {
     
      '/test': {
     
                target: 'http://10.0.1.226:8080',
                changeOrigin: true,
                pathRewrite: {
     
                    '^/test': '/'
       }
    }
  }
}

以上配置的意思为：

当url中包含’/test’的字段时，会将请求转发到http://10.0.1.226:8080

同时对xxxx/test的路径改写成’/’

例如： http://localhost:80/test/article => http://10.0.1.226:8080/arcticle

可以把‘/test’ 看成一个转发的标识

---

实际应用

我们在接口文件xxx.js中可以这么写

const v3 = 'test'// http://10.0.1.226:8080
export const getArticle = (query) => axios.get(`${
       v3}/article`, {
     params: query})

然后像上面一样，在vue.config.js中devServer配置就可以了