Vue项目报错Uncaught TypeError: Cannot set properties of undefined (setting ‘baseURL‘)

问题分析：

前端报错Uncaught TypeError: Cannot set properties of undefined (setting ‘baseURL’)

在用vue-cli创建项目后，通过npm install --save axios下载axios库，在Login.vue组件中使用axios.post方法调用后端的登录接口

<template>
  <div>
    用户名:<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/>
    <br><br>
    密码： <input type="password" v-model="loginForm.password" placeholder="请输入密码"/>
    <br><br>
    <button v-on:click="login">登录</button>
  </div>
</template>

<script>
  export default {
    name: 'Login',
    data () {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        responseResult: []
      }
    },
    methods: {
      login () {
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
              this.$router.replace({path: '/index'})
            }
          })
          .catch(failResponse => {
          })
      }
    }
  }
</script>

下载axios库后，在main.js里面进行注册，设置反向代理，前端请求默认发送到 http://localhost:8443/api

import Vue from 'vue'
import App from './App'
import router from './router'
// 设置反向代理，前端请求默认发送到 http://localhost:8443/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8443/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

就报错了，具体是这样，页面也显示不出来

解决方案：

通过查阅资料发现是axios的版本问题，重新下载指定版本的就行了

npm install axios@0.21 -S

至此，bug顺利解决，在此记录

此文章是我开发过程中的一个记录，方便我日后学习和复盘。若能帮到你不胜荣幸😊。