Vue.js - Uncaught (in promise) TypeError: __WEBPACK_IMPORTED_MODULE_0__services_Api__.a.post is not a function

Question

每次单击注册按钮时，都会出现此错误：

Uncaught (in promise) TypeError: __WEBPACK_IMPORTED_MODULE_0__services_Api__.a.post is not a function

AuthenticationService.js 具有以下代码：

import Api from '@/services/Api'

export default {
  register (credentials) {
    return Api.post('register', credentials)
  }
}

Api.js 有以下代码：

import axios from 'axios'

export default () => {
  return axios.create({
    baseURL: `http://localhost:8081/`
  })
}

这是 app.js 的代码：

console.log('Sup?')
const express = require('express')
const bodyParser = require('body-parser')
const cors = require('cors')
const morgan = require('morgan')

const app = express()
app.use(morgan('combined'))
app.use(bodyParser.json())
app.use(cors())

app.post('/register', (req, res) => {
  res.send({
    message: `${req.body.email} Registered!`
  })
})

app.listen(process.env.PORT || 8081)

Register.vue 有这个代码：

<template>
  <div>
    <h1>Register</h1>
    <input 
      type="email" 
      name="email"
      v-model="email"
      placeholder="email"/>
    <br>
    <input 
      type="password" 
      name="password"
      v-model="password"
      placeholder="password"/>
    <br>
    <button @click="register">
      Register
    </button>
  </div>
</template>

<script>
import AuthenticationService from '@/services/AuthenticationService'
export default {
  data () {
    return {
      email: '',
      password: ''
    }
  },
  methods: {
    async register () {
      await AuthenticationService.register({
        email: this.email,
        password: this.password
      })
      console.log('done!')
    }
  }
  // watch: {
  //   email (value) {
  //     console.log('email changed: ', value)
  //   }
  // }
}
</script>

Index.js 有这个：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Register from '@/components/Register'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: HelloWorld
    },
    {
      path: '/register',
      name: 'register',
      component: Register
    }
  ]
})

层次结构如下：项目层次结构

你可以在这个链接上获得这个项目： VueDev

Answer 1

我有同样的问题，我猜问题在这里：

import Api from '@/services/Api'

export default {
 register (credentials) {
  return Api.post('register', credentials)
 }
}

但应该有：

import Api from '@/services/Api'

export default {
  register (credentials) {
   return Api().post('register', credentials)
  }
}