Vue版本4.5.3安装axios提示 warning in ./src/plugins/axios.js "export 'default' (imported as 'Vue') was not found in 'vue'问题如何解决？

Question

本人初学Vue，没想到安装一步到位变成4.5.3版了，网上该版本安装axios相关内容比较少，最后通过vue add axios命令安装好了。
各环境版本如下：

 "dependencies": {
    "core-js": "^3.6.5",
    "vue": "^3.0.0-0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^3.9.0",
    "@typescript-eslint/parser": "^3.9.0",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0-0",
    "axios": "^0.18.1",
    "eslint": "^7.6.0",
    "eslint-plugin-vue": "^6.2.2",
    "vue-cli-plugin-axios": "0.0.4"
  },

通过npm run serve启动项目提示信息如下：

 WARNING  Compiled with 1 warnings                                                                                                                                       8:57:52 ├F10: AM┤
 warning  in ./src/plugins/axios.js

"export 'default' (imported as 'Vue') was not found in 'vue'


  App running at:
  - Local:   http://localhost:8080/    
  - Network: http://192.168.0.104:8080/

浏览器中提示错误如下：

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

发现问题出现在axios自动安装在./src/plugns/axios.js文件中Vue.use(Plugin);中，提示该use未定义。
该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);
  }
);


Plugin.install = function(Vue, options) {
  Vue.axios = _axios;
  window.axios = _axios;
  Object.defineProperties(Vue.prototype, {
    axios: {
      get() {
        return _axios;
      }
    },
    $axios: {
      get() {
        return _axios;
      }
    },
  });
};

Vue.use(Plugin);

export default Plugin;

网上查了半天还是没有解决该问题，请各位大神指点迷津。谢谢！

Answer 1

我看你是用typescript编程的用 vue-cli-plugin-axios-ts