vue-cli 3x项目配置（vue.config.js和接口配置）

1、项目中第一次跟后台尝试调用接口是否正常，我前段遇到一些报错，并且请求不了（跨域报错以及405 请求方法错误），如图：
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200714154119981.png

我的config配置是这样的：

咨询大佬说，这是多配置代理跨域，而且我自己还封装了接口

最后在页面调用接口，但是一直报跨域问题
后来的后来，大佬的思路是：虽然配置了代理，但是页面中未使用到。所以自己又重新配置了。
vue.config.js配置未改动

api/http.js
import axios from 'axios' // 引用axios
import config from '@/api/config'

const _baseUrl = config.baseUrl.dev // 使用到代理
const apiUrl = _baseUrl
// axios 配置
axios.defaults.timeout = 6000 // 设置接口响应时间
axios.defaults.baseURL = apiUrl // 这是调用数据接口,公共接口url+调用接口名
封装get请求
export function get (url, params = {}) {
  return new Promise((resolve, reject) => {
    axios
      .get(url, {
        params: params
      })
      .then(response => {
        resolve(response)
      })
      .catch(err => {
        reject(err)
      })
  })
}
封装post请求
export function post (url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(
      response => {
        // console.log(response.data.code)
        resolve(response.data)
      },
      err => {
        reject(err)
      }
    )
  })
}

api/config.js
export default {
  baseUrl: {
    dev: '/api' // 开发环境
    // dev: 'http://xxx.xx.xx.xx:8080'
    // pro: "http://production.com" 生产环境
  }
}

index.js
import { get, post } from '@/api/http'

export const login = p => get('/Login', p)
export const setMoble = () => get('/t')
export const loginPost = () => post('/GateWeb/Test')

最后在页面中导入接口，调用就可以了

import { setMoble } from '@/api/index.js'
btn(){
	setMoble() // 调用接口
        .then(res => {
          console.log(res)
          if (res.body === 'fail') {
            alert('用户名或密码错误,请重新输入')
            this.ruleForm.userName = ''
            this.ruleForm.password = ''
          } else {
            alert('登录成功')
            this.$router.push('/index')
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
}

最近很流行，你看我还有机会吗？，哈哈