VueJs：组件挂载失败

Question

VueJs：组件挂载失败

7

我正在使用Vue Router，但它没有加载组件，而是抛出了这个模糊的错误：

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，但组件无法加载。

- Jan Schmutz

你使用的是哪个版本的vue-loader？ - Peter

嗨Peter，我正在使用vue-loader 13.0.4版本。你有什么想法吗？ - Jan Schmutz

@JanSchmutz 我也遇到了同样的问题，请问你是如何解决的？ - Charles Okwuagwu

2个回答

0

你还没有在 app.js 文件中导入你的组件，你应该导入这个组件文件。假设它的名字是 xyz.vue

import componentName from 'path';

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

<script>
    export default {}
</script>

- Mohit Bajoria

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Peter · Accepted Answer

你可能遇到了这里描述的破坏性变更：https://github.com/vuejs/vue-loader/releases/tag/v13.0.0

试着在require()末尾添加.default。

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