最近在学习Vue3，使用vue cli4搭建了一个demo项目，安装axios后，控制台报错：
Uncaught TypeError: Cannot read property 'use' of undefinedat 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 sentreturn config;},function(error) {// Do something with request errorreturn Promise.reject(error);}
);// Add a response interceptor
_axios.interceptors.response.use(function(response) {// Do something with response datareturn response;},function(error) {// Do something with response errorreturn 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)})
