Question

这是我的主要javascript文件：

import Vue from 'vue'

new Vue({
  el: '#app'
});

我的HTML文件：

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

    <script src="{{ mix('/js/app.js') }}"></script>
</body>

使用运行时构建的Vue.js的Webpack配置：

alias: {
    'vue$': 'vue/dist/vue.runtime.common.js'
}

我仍然得到这个众所周知的错误：

[Vue警告]：无法安装组件：未定义模板或渲染功能。（在根实例中找到）

为什么我在装载Vue的#app div中没有一个东西，我仍然会收到渲染/模板错误？它说found in root但没有找到任何东西，因为它甚至没有任何内容？

如果这不起作用我怎么想装？

修改

我尝试过这样似乎有效：

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

这是有道理的，因为使用el属性意味着您正在“扫描”任何组件的dom元素，并且它没用，因为运行时构建没有编译器。

仍然是一个非常奇怪的错误消息，尤其是当我将整个#app div清空时。

希望有人能证实我的想法。

Answer 1

我只是在

之类的组件路径之后添加默认值

implementation 'com.github.rjain90:sdk:0.0.17'

对我有用。.感谢@Justin MacArthur

Answer 2

如果其他人一直遇到同样的错误。只需在组件模板中添加一个额外的div。

正如文件所说：

组件模板应该只包含一个根元素

检查这个简单的例子：

 import yourComponent from '{path to component}'
    export default {
        components: {
            yourComponent
        },
}

 // Child component
 <template>
     <div> This is the one! </div>
 </template>

Answer 3

您收到该错误的原因是您使用的运行时版本不支持HTML文件中的模板，如vuejs.org所示

从本质上讲，加载vue文件的原因是它们的模板编译时转换为渲染函数，而基函数试图从你的html元素编译。

Answer 4

对于我来说，我将组件（在路由器中）导入为：

import bsw from 'common-mod/src/components/webcommon/webcommon'

如果我将其更改为

，就可以解决

import bsw from 'common-mod/src/components/webcommon/webcommon.vue'

Answer 5

就我而言，由于从Laravel Mix版本2升级到了5，我遇到了错误。

在Laravel Mix版本2中，您将导入vue组件，如下所示：

Vue.component(
    'example-component', 
    require('./components/ExampleComponent.vue')
);

在Laravel Mix版本5中，您必须按照以下步骤导入组件：

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

以下是文档： https://laravel-mix.com/docs/5.0/upgrade

更好的是，为了提高应用程序的性能，您可以按如下所示延迟加载组件：

Vue.component("ExampleComponent", () => import("./components/ExampleComponent"));

Answer 6

从Laravel Mix 3到Laravel 4都有更新，这可能会影响所有组件的答案。
有关更多详细信息，请参见https://laravel-mix.com/docs/4.0/upgrade。

让'example-component'为示例组件，其地址为'./components/ExampleComponent.vue'。

Laravel 3：

 Vue.component('example-component', require('./components/ExampleComponent.vue'));

Laravel 4：

更改是添加了.default。

 Vue.component('example-component', require('./components/ExampleComponent.vue').default);

Answer 7

我个人遇到了同样的错误。以上解决方案均不适用于我。

实际上，我的组件看起来像这样（在名为my-component.js的文件中）：

Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

然后我像这样在另一个组件中导入它：

import MyComponent from '{path-to-folder}/my-component';

Vue.component('parent_component', {
    components: {
        MyComponent
    }
});

奇怪的是，这在某些组件中有效，但在此“ parent_component”中无效。因此，我在组件本身中要做的就是将其存储在变量中，并将其导出为默认值。

const MyComponent = Vue.component('my-component', {
    data() {
        return {
            ...
        }
    },
    props: {
        ...
    },
    template:`
        <div>
            ...
        </div>
    `
});

export default MyComponent;

它看起来似乎很明显，但是正如我上面说的，没有它，它就可以在其他1个组件中工作，因此我无法真正理解为什么，但是至少，现在它在任何地方都可以工作。

Answer 8

我以前的代码是

Vue.component('message', require('./components/message.vue'));

当我遇到此类错误时，我只需向其中添加.default即可。

Vue.component('message', require('./components/message.vue').default);

Answer 9

作为所有帖子的摘要

此错误：

[Vue警告]：无法安装组件：模板或渲染函数未定义。

由于某些问题而导致您无法安装组件。

这可能是由许多不同的问题引起的，正如您在此处的不同文章中所看到的那样。彻底调试组件，并注意所有可能未正确完成并可能阻止安装的事情。

_{我的组件文件编码不正确时出现错误...}

Answer 10

我在laravel的app.js中拥有此脚本，该脚本会自动将所有组件添加到组件文件夹中。

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key)))

要使其正常工作，只需添加默认值

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Answer 11

类似的东西应该可以解决问题。

Vue.component(
'example-component', 
require('./components/ExampleComponent.vue').default);

Answer 12

确保像这样明确地导入.vue扩展名：

import myComponent from './my/component/my-component.vue';

例如，如果您不添加.vue并且在该目录中有一个具有相同名称的.ts文件，例如，如果要将js / ts与模板分开并进行链接在my-component.vue中是这样的：

<script lang="ts" src="./my-component.ts"></script>

...，那么默认情况下，导入将引入.ts，因此实际上没有定义模板或渲染函数，因为它没有导入.vue模板。

当您告诉它在导入中使用.vue时，它将立即找到您的模板。

Answer 13

<template><div></div></template>

就我而言，我的子组件是空白的！我将它导入到父组件中，没有任何模板、脚本或样式（完整的空白 child.vue 文件）。所以我只是在我的子组件中添加了上面的模板并且它工作正常。

Answer 14

就我而言，它对我有用

const routes = [
{ path: '/dashboard', component: require('./components/Dashboard.vue').default },
{ path: '/profile', component: require('./components/Profile.vue').default }]

Answer 15

我必须更改的 visual.ts 文件中的类似问题：

import { createApp } from 'vue'
import Visual from './Visual.vue'
- const app = createApp({Visual}).mount('#visual')
+ const app = createApp(Visual).mount('#visual')

Answer 16

另一种混合的想法......在我的例子中，抛出错误的组件是一个带有自定义 render() 函数的无模板组件。我不明白为什么它不起作用，直到我意识到我没有在组件的代码周围放置 <script>...</script> 标签（似乎没有必要，因为我没有模板或样式标签）。不知道为什么这会通过编译器...？

无论哪种方式...请确保使用您的 <script> 标签 ;-)

Answer 17

我将在此处添加此b / c似乎有许多不同的原因会出现此令人沮丧的错误。就我而言，这是我的import语句中的语法问题。我有

import DataTable from '@/components/data-table/DataTable';

我应该有的时间

import DataTable from '@/components/data-table/';

您的项目设置和配置可能会有所不同，但是如果遇到此错误，建议您检查组件的导入语法是否符合项目预期。

Answer 18

如果您以前这样调用组件：

Vue.component('dashboard', require('./components/Dashboard.vue'));

我想当您更新到laravel mix 5.0或其他库时出现了问题，因此您必须放入.default ...

Vue.component（'dashboard'，require（'./ components / Dashboard.vue'）。default）;

我解决了同样的问题。

Answer 19

当与故事书和typecirpt一起使用时，我不得不添加

.storybook/webpack.config.js

const path = require('path');

module.exports = async ({ config, mode }) => {

    config.module.rules.push({
        test: /\.ts$/,
        exclude: /node_modules/,
        use: [
            {
                loader: 'ts-loader',
                options: {
                    appendTsSuffixTo: [/\.vue$/],
                    transpileOnly: true
                },
            }
        ],
    });

    return config;
};

Answer 20

就我而言，我使用的是默认导入：

import VueAutosuggest from 'vue-autosuggest';

使用命名导入对其进行修复： import {VueAutosuggest} from 'vue-autosuggest';

Answer 21

在忘记将组件内容包含在template元素中之前，我遇到了同样的错误。

我最初有这个

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './com/Home.vue';

Vue.use(VueRouter);

Vue.router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
    ]
});

然后在 Home.vue 中，我有

<h1>Hello Vue</h1>

出现错误：

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

found in

---> <Home> at resources/js/com/Home.vue
       <Root>

包含在元素中的错误已修复：

<template>
   <h1>Hello Vue</h1>
</template>

Answer 22

我正在将Typescript与vue-property-decorator一起使用，发生的事情是我的IDE自动完成了“ MyComponent.vue.js”而不是“ MyComponent.vue”。那给我这个错误。

故事的寓意似乎是，如果您收到此错误，并且正在使用任何类型的单文件组件设置，请检查路由器中的导入。

Answer 23

我不敢相信我是如何解决该问题的！奇怪的解决方案！
我让应用程序保持运行状态，然后删除了所有模板标签，然后再次将它们退回，并且可以正常工作！但是我不明白发生了什么

Vue模板或渲染功能尚未定义我既不使用？

23 个答案: