Warm tip: This article is reproduced from serverfault.com, please click

javascript-Webpack编译错误:TypeError:__WEBPACK_IMPORTED_MODULE_1__…不是函数

(javascript - Webpack compile error: TypeError: __WEBPACK_IMPORTED_MODULE_1__ … is not a function)

发布于 2017-05-12 21:28:27

因此,这是我的Api服务组件,我正在使用Axios:

import api from './Api.vue';

export default {
    name: 'app-feed-service',
    methods: {
        getPosts() {
            return api.get('posts/');
        }
    }
}

和一些饲料成分

import AppSinglePost from './../Feed/Post.vue';
import AppFeedService from './../../api/Feed.vue';

export default {
    name: 'app-posts',
    components: {
        AppSinglePost
    },
    data() {
        return {
            posts: []
        }
    },
    created() {
        AppFeedService.getPosts().then((res) => {
            console.log(res);
        });
    }
}

现在的错误:

TypeError: __WEBPACK_IMPORTED_MODULE_1__api_Feed_vue___default.a.getPosts is not a function

有人可以帮忙吗?

Questioner
Lukas
Viewed
11
Bert 2017-05-13 05:48:07

看起来Feed.vue中定义的AppFeedService并不是真正的组件,它只是你要调用的服务的集合。由于你已将其定义为组件,因此必须在某个地方实例化该组件,这在大多数情况下将意味着你已在另一个组件的中使用了它template

你可以仅将其定义为对象。

import api from './Api.js';

export default {    
    getPosts() {
        return api.get('posts/');
    }
}

你的Api.vue文件可能也是如此。.vue在定义实际组件时才需要使用文件。

然后在你的Feed组件中

import AppFeedService from './../../api/Feed.js';

总结一下:.vue文件格式用于定义单个文件组件.vue在实际定义单个文件组件时才需要一个文件(可能会在template其他组件中使用某些文件)。如果只需要一个包含方法或某种状态集合的对象,则可以使用普通的javascript对其进行定义。