关于前端:vue30二次封装axios配置本地代理

vue3.0新建我的项目二次封装axios，配置本地代理。

1、在src文件夹中创立http文件夹并新建http.js和api.js，并在更目录创立vue.config.js文件

2、配置http.js文件

如果没有装置axios，首先装置axios

cnpm install axios -S

// 一、配置axios
import axios from 'axios'
// import store from '@/store/index' 如果应用vuex，那么token，userinfo都能够在登录当前存储到store中，不须要应用storage
// 获取浏览器的接口地址。
let baseUrl = window.location.origin
// axios配置
axios.defaults.baseURL = baseUrl
// 设置申请最大时长
axios.defaults.timeout = 50000
axios.defaults.withCredentials = true
// 申请拦截器
axios.interceptors.request.use(config => {
  if (localStorage && localStorage.getItem('token')) {
    const token = localStorage.getItem('token')
    token && (config.headers.Authorization = token)
  }
  return config
}, error => {
  // 能够装置elementui等ui组件，将错误信息输入到界面。
  console.log(error)
  return Promise.error(error)
})
// 响应拦截器
axios.interceptors.response.use(response => {
  if (response.status === 200) {
    // 993登录过期
    if (response.data.code !== '993') {
      return Promise.resolve(response)
    } else {
      console.log('登录过期')
      // store.commit('clearUserInfo')  // 应用vuex存储过用户信息，这里须要清空一下。
      window.location.href = '/#/login'
    }
  } else {
    return Promise.reject(response)
  }
})

// 2、封装申请形式
// @param url 接口地址
// @param data 携带参数
// @param file 上传文件对象
// @param auth 是否携带token
// get申请
export function get (url, data, auth=true) {
  if (auth) {
    return axios.get(url, data, { headers: {Authorization: localStorage.getItem('token')}})
  } else {
    return axios.get(url)
  }
}
// post申请
export function post (url, data, auth=true) {
  if (auth) {
    return axios.post(url, data, {header: {Authorization: localStorage.getItem('token')}})
  } else {
    return axios.post(url, data)
  }
}
// put申请
export function put (url, data, auth=true) {
  if (auth) {
    return axios.put(url, data, {header: {Authorization: localStorage.getItem('token')}})
  } else {
    return axios.put(url, data)
  }
}
// delete 申请
export function del (url, data, auth=true) {
  if (auth) {
    return axios.delete(url, data, { headers: {Authorization: localStorage.getItem('token')}})
  } else {
    return axios.delete(url)
  }
}
// upload 申请
export function uploader (url, file, auth=true) {
  let params = new FormData()
  params.append('file', file)
  if (auth) {
    return axios.post(url, params, {header: {Authorization: localStorage.getItem('token')}})
  } else {
    return axios.post(url, params)
  }
}

3、配置api.js文件

// 封装后盾接口办法
import { get, post, put, del, uploader } from './http'
export const LOGIN = (params) => get('service-core/wechat/serviceAccount/qrCode/create', params, false)
export const REGISTER = (params) => put('service-core/user_register', params, false)
export const USER_LIST = (params) => post('service-core/user_list', params)
export const USER_LIST_ID = (params) => get(`service-core/user_list/${params.id}`)
export const UPLOAD_USER_CARD = (params) => uploader('service-core/user_upload_card', params)
export const DELETE_BOOK = (params) => del(`service-core/book_list/${params.id}`)

4、在组件中应用接口

import { LOGIN } from '../http/api'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  setup () {
    onMounted (() => {
      LOGIN({username: 'zhangxuchao', password: '123456'}).then(res => {
        console.lo(res)
      })
    })
  }
}

5、配置代理 vue.config.js

module.exports = {
  // 根本门路
  publicPath: './',
  // build后默认门路
  baseUrl: './',
  // 构建时的输入目录
  outputDir: 'dist',
  // 搁置动态资源的目录
  assetsDir: 'static',
  // html 的输入门路
  indexPath: 'index.html',
  //文件名哈希
  filenameHashing: true,
  // 是否在保留的时候应用 `eslint-loader` 进行查看。
  lintOnSave: true,
  // 是否应用带有浏览器内编译器的残缺构建版本
  runtimeCompiler: false,
  // babel-loader 默认会跳过 node_modules 依赖。
  transpileDependencies: [ /* string or regex */ ],
  // 是否为生产环境构建生成 source map？
  productionSourceMap: false,
  // 设置生成的 HTML 中 <link rel='stylesheet'> 和 <script> 标签的 crossorigin 属性。
  crossorigin: '',
  // 在生成的 HTML 中的 <link rel='stylesheet'> 和 <script> 标签上启用 Subresource Integrity (SRI)。
  integrity: false,
  // 调整外部的 webpack 配置
  configureWebpack: () => {}, //(Object | Function)
  chainWebpack: () => {},
  // 配置 webpack-dev-server 行为。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: true,
    hotOnly: false,
    // 查阅 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
    proxy: {
      // 接口地址代理
      '/service-core': {
        target: 'https://www.zhangxuchao.com', // 接口的域名
        secure: false, // 如果是https接口，须要配置这个参数
        changeOrigin: true, // 如果接口跨域，须要进行这个参数配置
        pathRewrite: { "^/service-core": "service-core" }
      },
      //微信二维码登录
      "/wechat": {
        target: "https://www.eastgrain.cn/service-core",
        secure: false,
        changeOrigin: true,
        pathRewrite: { "^/wechat": "" }
      }
    }
  },
  // 三方插件的选项
  pluginOptions: {
    // ...
  }
}