导入Vue组件

时间:2017-08-08 19:59:21

标签: javascript laravel vue.js vue-component

我注册了一个Vue组件:

Vue.component('logo', function (resolve) {require(['./components/layout/Logo.vue'], resolve)});

组件本身定义为:

<template>
    <div>
        <div class="title">
            <a href="/">
                <h1>Welcome to my Site!</h1>
            </a>
        </div>
        <navigation></navigation>
    </div>
</template>

<style scoped>
    h1 {
        text-decoration: underline;
        text-align: center;
        color: #000000;
    }

</style>

<script>
    import Navigation from './Navigation.vue';

    export default {
        data() {
            return {
                msg:'hello vue'
            }
        },
        components: {
            Navigation
        }
    }

</script>

Logo.vueNavigation.vue位于同一目录中。 Webpack在运行时不会抱怨。

虽然报告了控制台错误,但网站加载时

app.js:142 TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (app.js:50)
    at app.js:883
    at <anonymous>
__webpack_require__.oe @ app.js:142
Promise rejected (async)
(anonymous) @ app.js:883
resolveAsyncComponent @ app.js:33890
createComponent @ app.js:35368
_createElement @ app.js:35578
createElement @ app.js:35517
vm._c @ app.js:35857
(anonymous) @ VM449:2
Vue._render @ app.js:35909
updateComponent @ app.js:34319
get @ app.js:34662
Watcher @ app.js:34651
mountComponent @ app.js:34323
Vue$3.$mount @ app.js:39644
Vue$3.$mount @ app.js:41847
Vue._init @ app.js:36017
Vue$3 @ app.js:36102
(anonymous) @ app.js:886
__webpack_require__ @ app.js:50
(anonymous) @ app.js:857
__webpack_require__ @ app.js:50
(anonymous) @ app.js:145
(anonymous) @ app.js:148
app.js:50 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (app.js:50)
    at app.js:883
    at <anonymous>

当我使用Vue.component('navigation', function (resolve) {require(['./components/layout/Navigation.vue'], resolve)});全局注册第二个组件时,是否使用该组件,会发生同样的错误。

1 个答案:

答案 0 :(得分:0)

我的font-family: 'Lobster Two', cursive; 包含:

webpack.mix.js

删除后,我能够正确加载。这是为了将输出的块文件移动到mix.webpackConfig({ output: { filename: "js/[id].js" } }); 目录,但显然是错误的。