vue.config.js配置及axios

后端给你域名或者ip了，让你配置

配置vue.config.js

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

vue.config.js

let path = require('path')
module.exports = {
	publicPath: './',
	//跨域代理
	devServer: {
		host: '127.0.0.1', //这是我本机ip地址 // 自定义域名，需要在hosts文件里配置
        port: 8080,
        open: true, //vue项目启动时自动打开浏览器
        https: false,
        // 配置反向代理
		proxy: {
             // 当地址中有/api的时候会触发代理机制
			'/api': {   //'/api'是代理的标识，用来告诉服务器，url前面的/api就是使用的代理
				target: 'http://localhost:3000',
				changeOrigin: true, //是否要跨域
                // 路径重写
				//pathRewrite: {
				//	'^/api': ''
				//}
			}
		}
	},
    // 把 @设置为 ./src
	configureWebpack: config => {
		config.resolve = {
			extensions: ['.js', '.json', '.vue'],
			alias: {
				'@': path.resolve(__dirname, './src')
			}
		};
	},
	lintOnSave: false //每次保存代码是否进行eslint校验
};

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

3、自定义一个域名写入host，然后在本地hosts中进行配置

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

然后配置axios(重点掌握)

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

1、安装axios

npm install axios

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

request.js

import axios from "axios";
import store from "@/store";

//axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'

const myAxios = axios.create({
  baseURL: "https://toutiao.itheima.net/",
  timeout: 5000,
});


// 请求拦截器
myAxios.interceptors.request.use(
    config => {
        // 为请求头挂载 Authorization 字段
         if (store.state.token) {
              config.headers.Authorization = store.state.token;
            }
        return config;
    },
    error => Promise.reject(error)
);

// 响应拦截器
myAxios.interceptors.response.use(response => {
 // 响应状态码为 2xx 3xx 时触发成功的回调，形参中的 response 是“成功的结果”
 //return到axios原地Promise对象，作为成功的结果

  return response 
}, error => {

        // 响应状态码不是 2xx 时触发失败的回调，形参中的 error 是“失败的结果”
        if (error.response.status === 401) {
          // 无效的 token 或token过期了
          // 把 Vuex 中的 token 重置为空，并跳转到登录页面
          store.commit('updateToken', '')
          router.push("/login");
        }
  
        return Promise.reject(error)
})

export default myAxios

3、在src下api文件夹里面创建index.js , 在这里封装接口

index.js

// 导入上面封装的request文件
import axios from './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: 'xxx',
        pas: 'xxx',
        other: 'xxx'
      })
      // 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>