Vue 模板或渲染函数尚未定义，但我两者都没有使用？

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 warn]: Failed to mount component: template or render function not defined. (found in root instance)

为什么我在我的#app div 中什至没有任何东西我挂载 Vue，我仍然收到 render/template 错误？它说 found in root 但是没有任何内容可以找到，因为它甚至没有任何内容？

如果这不起作用，我该如何挂载？

编辑：

我试过这样似乎有效：

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

这是有道理的，因为使用 el 属性意味着您是 'scanning' 任何组件的 dom 元素，它是无用的，因为运行时构建没有编译器。

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

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

Answer 1

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

本质上，vue 加载文件发生的事情是它们的模板在编译时转换为渲染函数，而您的基本函数试图从您的 html 元素进行编译。

Answer 2

如果其他人不断收到同样的错误。只需在您的组件模板中添加一个额外的 div 即可。

如文档所述：

Component template should contain exactly one root element

检查这个简单的例子：

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

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

Answer 3

我个人运行陷入同样的错误。 None 以上解决方案对我有用。

事实上，我的组件看起来像这样（在一个名为 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 4

就我而言，我将我的组件（在路由器中）导入为：

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

我改成

就简单解决了

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

Answer 5

我不敢相信我是如何解决这个问题的！奇怪的解决方案！
我保留了该应用程序运行，然后我删除了所有模板标签，然后再次将它们退回并且它起作用了！但我不明白发生了什么。

Answer 6

我将 Typescript 与 vue-property-decorator 一起使用，发生在我身上的是我的 IDE auto-completed "MyComponent.vue.js" 而不是 "MyComponent.vue"。这让我犯了这个错误。

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

Answer 7

在我忘记将组件内容包含在 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 8

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

import VueAutosuggest from 'vue-autosuggest';

使用命名导入修复了它： import {VueAutosuggest} from 'vue-autosuggest';

Answer 9

就我而言，我收到错误是因为我从 Laravel Mix Version 2 升级到 5。

在Laravel Mix Version 2中，你导入vue组件如下：

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

在 Laravel Mix Version 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 10

这样应该可以解决问题..

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

Answer 11

当与故事书和打字稿一起使用时，我必须添加

.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 12

如果你曾经这样调用组件：

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

我想当您更新到 laravel mix 5.0 或其他库时会出现问题，因此您必须放置 .default。如下图：

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

我解决了同样的问题

Answer 13

有一个从 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 14

作为所有帖子的总结

这个错误：

[Vue warn]: Failed to mount component: template or render function not defined.

您遇到的问题是阻止安装您的组件。

这可能是由许多不同的问题引起的，您可以从此处的不同帖子中看出。彻底调试您的组件，并注意可能未正确完成并可能阻止挂载的所有内容。

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

Answer 15

确保像这样明确导入 .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 16

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

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

我应该有的时候

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

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

Answer 17

我之前的代码是

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

当我遇到这样的错误时，我只需添加 .default 就可以了..

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

Answer 18

我在 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 19

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

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

Answer 20

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

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

Answer 21

就我而言，它对我有用

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

Answer 22

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

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

Answer 23

那是我在 Laravel 工作时的一个错误。对我有用的代码

//require('./bootstrap');
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

window.Vue = require('vue');
import Vue from 'vue'

Vue.component('dictionary-index',  () => import('./components/DictionaryIndex.vue'));

Vue.component('dictionary-create',  () => import('./components/DictionaryCreate.vue'));

Vue.component('dictionary-cat',  () => import('./components/DictionaryCategory.vue'));

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

Answer 24

这个错误是因为我错误的导入

改为

components: {
  MyComp: import('./MyComp.vue'),
}

写

components: {
  MyComp: () => import('./MyComp.vue'),
}

Answer 25

您缺少 HTML 部分的 <template> 标签。

Answer 26

Try adding .default in you require component

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

Answer 27

我通过删除 node_modules 目录和运行 npm install 和 npm run dev 再次解决了这个问题。

Answer 28

let allSalary = require('./components/salary/index.vue');

改用这个

let allSalary = require('./components/salary/index.vue').default;

Vue 模板或渲染函数尚未定义，但我两者都没有使用？

Vue template or render function not defined yet I am using neither?

javascript

vue.js

vue-component

vuejs2