VueJs:无法挂载组件

Jan*_*utz 4 javascript webpack vue.js vuejs2

我正在使用Vue Router,而不是加载组件,它抛出了我这个模糊的错误:

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

found in
---> <Anonymous>
       <Root>
Run Code Online (Sandbox Code Playgroud)

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

import Vue from 'vue'

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

import App from './app.vue'

new Vue(App).$mount('#app')
Run Code Online (Sandbox Code Playgroud)

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>
Run Code Online (Sandbox Code Playgroud)

(app.vue)

<template>
<div>
    <router-view></router-view>
</div>
</template>
<script>
    import {
            router,
    } from './bootstrap.js';
    export default {
        router,
    };
</script>
Run Code Online (Sandbox Code Playgroud)

路由器:

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,
};
Run Code Online (Sandbox Code Playgroud)

最后组件:

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

<script>
    export default {}
</script>
Run Code Online (Sandbox Code Playgroud)

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

Pet*_*ter 17

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

尝试将.default添加到您的结尾require().

component: require('./index/index.vue').default
Run Code Online (Sandbox Code Playgroud)


Moh*_*ria 0

您尚未在 app.js 文件中导入组件,您应该导入此组件文件。假设它的名称是 xyz.vue

import componentName from 'path';

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

<script>
    export default {}
</script>
Run Code Online (Sandbox Code Playgroud)