Webpack编译错误:TypeError:__WEBPACK_IMPORTED_MODULE_1__…不是函数 [英] Webpack compile error: TypeError: __WEBPACK_IMPORTED_MODULE_1__ … is not a function

问题描述

所以，这是我的Api服务组件，我正在使用Axios:

So, this my Api Service Component, I'm using 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

有人可以帮忙吗?

推荐答案

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

It looks like AppFeedService as defined in Feed.vue is not really a component, it's just a collection of services you want to call. Since you have defined it as a component, the component would have to be instantiated somewhere, which in most cases would mean you used it in another component's template.

您可以仅将其定义为对象.

You can just define it as an object instead.

import api from './Api.js';

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

与您的Api.vue文件可能相同.定义实际组件时，只需使用 .vue 文件.

Same thing for your Api.vue file likely. You only need to use a .vue file when you are defining an actual component.

然后在您的供稿组件中

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

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

To summarize: the .vue file format is meant for defining single file components. You only need a .vue file when you are actually defining a single file component (something that would probably be used in the template of a different component). If you just want an object that contains a collection of methods or some state, just define it with plain javascript.

这篇关于Webpack编译错误:TypeError:__WEBPACK_IMPORTED_MODULE_1__…不是函数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！