VueJs:无法挂载组件

时间:2017-08-30 15:42:36

标签: javascript webpack vue.js vuejs2

我使用的是Vue路由器,而不是加载组件,它会引发我这个模糊的错误:

Failed to mount component: template or render function not defined.

found in
---> <Anonymous>
       <Root>

这是我的切入点(app.js)(请注意我将多个条目与CommonsChunksPlugin结合使用):

import Vue from 'vue'

import '../../../assets/css/main.css'

import App from './app.vue'

new Vue(App).$mount('#app')

Html文件(app.html)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
maximum-scale=1.0, user-scalable=0">

</head>
<body>
    <div id="app"></div>
</body>
</html>

(适用app.vue)

<template>
<div>
    <router-view></router-view>
</div>
</template>
<script>
    import {
            router,
    } from './bootstrap.js';
    export default {
        router,
    };
</script>

路由器:

import Vue from 'vue';

import VueRouter from 'vue-router';

var routes = [
                {
                    path: '/login',
                    name: 'login.index',
                    component: require('./index/index.vue'),
                },
                {
                    path: '/',
                    redirect: '/login',
                },
        ];

Vue.use(VueRouter);

export const router = new VueRouter({
     routes,
});


Vue.router = router;

export default {
    router,
};

最后是组件:

<template>
<div>
    <h1>Test</h1>
</div>
</template>

<script>
    export default {}
</script>

我按预期重定向到/ login,但组件不会加载。

2 个答案:

答案 0 :(得分:15)

您可能正在遇到此处所述的重大变化:https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

尝试将.default添加到require()的末尾。

component: require('./index/index.vue').default

答案 1 :(得分:0)

您尚未在app.js文件中导入组件,应导入此组件文件。让我们说它的名字是xyz.vue

import componentName from 'path';

<template>
<div>
    <h1>Test</h1>
</div>
</template>

<script>
    export default {}
</script>