Vue3 安装axios使用报错：Uncaught TypeError: Cannot read property ‘use‘ of undefined

最近在学习Vue3，使用vue cli4搭建了一个demo项目，安装axios后，控制台报错：

Uncaught TypeError: Cannot read property 'use' of undefined
    at eval (axios.js?be3b:59)
    at Module../src/plugins/axios.js (app.js:1229)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at eval (main.ts:10)
    at Module../src/main.ts (app.js:1217)
    at __webpack_require__ (app.js:854)
    at fn (app.js:151)
    at Object.1 (app.js:1290)
    at __webpack_require__ (app.js:854)

根本原因是 引入的axios库是使用vue2.0开发的一套组件库，而我们当前的项目为vue3，所有存在兼容性的问题。

在vue2中，我们这样使用axios:

之所以能使用Vue.use，是因为在vue2中我们使用 new Vue 来创建Vue实例，官网也说了，这样的做法会带来很多问题：


所以 Vue3 引入了新的全局 API：createApp

在Vue3中，我们可以使用 config.globalProperties 替换 Vue.prototype。

最终全局引入axios方式：

axios.js:

"use strict";

// import Vue from 'vue';
import axios from "axios";

// Full config:  https://github.com/axios/axios#request-config
// axios.defaults.baseURL = process.env.baseURL || process.env.apiUrl || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

let config = {
  // baseURL: process.env.baseURL || process.env.apiUrl || ""
  // timeout: 60 * 1000, // Timeout
  // withCredentials: true, // Check cross-site Access-Control
};

const _axios = axios.create(config);

_axios.interceptors.request.use(
  function(config) {
    // Do something before request is sent
    return config;
  },
  function(error) {
    // Do something with request error
    return Promise.reject(error);
  }
);

// Add a response interceptor
_axios.interceptors.response.use(
  function(response) {
    // Do something with response data
    return response;
  },
  function(error) {
    // Do something with response error
    return Promise.reject(error);
  }
);

export default {
  install: function (app, options) {
    console.log(options)
    // 添加全局的方法
    app.config.globalProperties.axios = _axios;
    // 添加全局的方法
    app.config.globalProperties.$translate = (key) => {
      return key
    }
  }
}

main.js：

import axios from './plugins/axios.js'
app.use(axios)

使用：

// getCurrentInstance代表全局上下文，ctx相当于Vue2的this,
// 但是特别注意ctx代替this只适用于开发阶段，等你放到服务器上运行就会出错，
// 所以使用proxy替代ctx，才能在你项目正式上线版本正常运行

 const { ctx, proxy }:any = getCurrentInstance();
 proxy.axios.post('api/Login',{card:111}).then((e:any)=>{
	console.log(e)
 })