Question

我使用的是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，但组件不会加载。

Answer 1

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

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

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

Answer 2

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

import componentName from 'path';

<template>
<div>
    <h1>Test</h1>
</div>
</template>

<script>
    export default {}
</script>

VueJs：无法挂载组件

2 个答案: