vue脚手架配置反向代理proxy

---
title: vue反向代理配置
date: 2019-03-01 11:26:43
tags: vue
---

摘要: vue-cli实现反向代理跨域

<!--more-->

##### 1.如果没有vue脚手架需先要安装脚手架

```
cnpm i @vue/cli -g
```

##### 2.利用脚手架创建项目

```
vue create myproject（项目名）
```

##### 3.创建完项目后，需手动在项目根目录创建vue.config.js

```
# vue.config.js
module.exports = {
  devServer: {
    host: 'localhost',
    port: 8080,
    proxy: {
      '/getDiscList': {
        target: 'https://xxx.com',// 要跨域的域名
        changeOrigin: true, // 是否开启跨域
        pathRewrite: {
                '^/api': '/api/'   // 在请求的时候 凡是/api开头的地址都可以跨域
        }
      },
    }
  }
};
```

##### 4.在请求跨域接口的时候就可以利用本地服务加上要跨域的接口地址即可

```
# 例如我的本地服务端口  localhost:8080

axios.get('http://localhost:8080/api/login')

```