配置vue.config.js
 

1、在自己项目根目录下新建文件vue.config.js，将下面代码copy进去
 

vue.config.js

module.exports = {
  runtimeCompiler: true,
  publicPath: '/', //设置打包路径
  devServer: {
    host: 'test.cn',  // 自定义域名，需要在hosts文件里配置
    port: 8080,
    open: true,
    https: false,
    // 设置开发接口代理
    proxy: {
      // 服务一
      "/api": {
        // target 是后端给你的服务，可以通过ip配置，也可以通过域名配置
        // 当请求接口的时候遇到 "/api" 会自动转为target里的服务，解决跨域
        // 配置域名
        target:'https://www.baidu.com/',
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
      },

      // 服务二
      // "/api/v1": {
      //   这里是通过ip来配置
      //   target: 'http://10.10.2.173:8080',
      //   ws: true,
      //   changeOrigin: true,
      // },
    },
  }
}

2、将后端给自己的ip或者域名，写入target中

3、自定义一个域名写入host，然后在本地hosts中进行配置（windows和mac配置方法不同，配置方法在下一篇文章中）

4、配置完成后，这里需要注意，每次vue.config.js这个文件有变动，都要重新运行一次npm run serve

5、然后你就可以通过你自定义的域名test.cn在浏览器来访问你的项目了

配置完成，然后配置axios

axios官网：
http://www.axios-js.com/zh-cn/docs/#axios-config
 

1、安装axios

npm install axios

2、在src下创建utils工具文件夹，在其下创建request.js,在这个文件创建axios实例，请求拦截器以及响应拦截器（如下代码直接copy进自己的文件里）

request.js

import axios from 'axios'
const instance1 = axios.create({
    timeout: 5000
})

// 请求拦截器
instance1.interceptors.request.use(
    config => {
        return config;
    },
    error => Promise.reject(error)
);

// 响应拦截器
axios.interceptors.response.use(success => {
    return success
}, error => {
    return Promise.reject(error)
})

export default instance1

3、在src下创建api文件夹，这里放接口文件

我们在src里创建一个index.js，在这里封装接口

index.js

// 导入上面封装的request文件
import axios from '../utils/request'
// 请求遇到 "/api" 就会自动替换为vue.config.js里target里的服务
const BASE = '/api'

export const test = () => {
    return axios({
        url:`${BASE}/ceshi`,
        method: 'post',
    })
}

export const login = (data) => {
    return axios({
        url: `${BASE}/ceshi`,
        method: 'get',
        data: data
    })
}

4、使用接口

home.vue

<template>
  <div>
    <button @click="hClick">btn</button>
    <button @click="hClick2">登录</button>
  </div>
</template>

<script>
// 导入要使用的接口，这里要注意，大括号不能丢
import { test, login } from '../api/index'
export default {
  methods: {
    async hClick(){
      const res = await test()
      console.log(res);
    },
    
    // 使用接口async 不能丢
    async hClick2(){
      const res = await login({
        user: '老王',
        pas: '888',
        other: '隔壁老王'
      })
      // res是后端响应回来的数据
      if(res.data.content.code == '200'){
        let tokenData = res.data.content.token
        this.$store.commit ('setToken',tokenData)
        this.$router.push('/home')
      }
    },
  }
}
</script>

<style lang="less" scoped>
</style>

任务

1、查axios拦截器（请求拦截器、响应拦截器）

2、axios创建实例时的配置