尚未定义 Vue 模板或渲染函数我都没有使用？答案

【问题标题】：Vue template or render function not defined yet I am using neither?尚未定义 Vue 模板或渲染函数我都没有使用？
【发布时间】：2017-06-18 10:27:00
【问题描述】：

这是我的主要 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 被清空时。

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

【问题讨论】：

就我而言，只写

标签： javascript vuejs2 vue-component vue.js

【解决方案1】：

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

【讨论】：

【解决方案2】：

尝试在你需要的组件中添加 .default

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

【讨论】：

【解决方案3】：

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

【讨论】：

这没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【解决方案4】：

这个错误对我来说是因为错误的导入

改为

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

写

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

【讨论】：

它为我解决了这个问题！非常感谢:)

【解决方案5】：

那是我在 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',
});

【讨论】：

【解决方案6】：

&lt;template&gt;&lt;div&gt;&lt;/div&gt;&lt;/template&gt;

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

【讨论】：

【解决方案7】：

就我而言，它对我有用

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

【讨论】：

【解决方案8】：

visual.ts 文件中的类似问题我不得不更改：

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

【讨论】：

【解决方案9】：

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

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

【讨论】：

【解决方案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))

【讨论】：

【解决方案11】：

我之前的代码是

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

当我遇到此类错误时，我只需将.default 添加到它，它就可以工作了..

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

【讨论】：

【解决方案12】：

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

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

我应该有的时候

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

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

【讨论】：

【解决方案13】：

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

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

我想当你更新到 laravel mix 5.0 或其他库时会出现问题，所以你必须放 .default。如下：

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

我解决了同样的问题。

【讨论】：

这解决了我的问题！谢谢！
解决了我的问题。谢谢

【解决方案14】：

确保您像这样显式导入.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 时，它会立即找到您的模板。

【讨论】：

【解决方案15】：

从 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);

【讨论】：

【解决方案16】：

作为所有帖子的摘要

这个错误：

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

由于某个问题导致您的组件无法安装。

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

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

【讨论】：

哇，被低估的答案。谢谢你。我的问题文件被编码为“utf-16”。我将其更改为 utf-8 并且正在工作。

【解决方案17】：

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

.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;
};

【讨论】：

【解决方案18】：

这样的事情应该可以解决问题..

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

【讨论】：

【解决方案19】：

就我而言，我收到错误是因为我从 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"));

【讨论】：

或将.default 附加到您想要使用的任何内容中。
这可行，但根据文档，建议切换到 EcmaScript 导入。

【解决方案20】：

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

import VueAutosuggest from 'vue-autosuggest';

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案22】：

我正在使用带有 vue-property-decorator 的 Typescript，发生在我身上的是我的 IDE 自动完成“MyComponent.vue.js”而不是“MyComponent.vue”。这给了我这个错误。

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

【讨论】：

【解决方案23】：

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

【讨论】：

绝对奇怪，但这对我也有用。我很困惑。

【解决方案24】：

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

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

换成这样就解决了

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

【讨论】：

花了很多时间来解决这个问题。 Vue 中的错误消息有多不准确。该死的。
它也对我有用。有人能解释一下这两种进口有什么区别吗？
我想这与更新的webpack模块导入规则有关。这样就识别出是vue文件并正确挂载了。
对我来说这是正确的答案。导入时不要忘记 .vue 扩展名！
非常感谢！半天前我坚持这个 sh.t，我也忘了把 .vue 放到我的一个组件导入中......

【解决方案25】：

我个人也遇到了同样的错误。以上解决方案都不适合我。

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

奇怪的是，这在某些组件中有效，但在此“父组件”中无效。所以我必须在组件本身中做的就是将它存储在一个变量中并将其导出为默认值。

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

export default MyComponent;

这似乎很明显，但正如我上面所说，没有这个，它可以在其他 1 个组件中工作，所以我真的不明白为什么，但至少现在到处都可以工作。

【讨论】：

这真的是正确的方法吗？它确实解决了我的问题，但我不明白为什么。
我也有同样的问题。组件在一个父级中运行良好，在另一个父级中失败

【解决方案26】：

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

正如文档所说：

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

检查这个简单的例子：

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

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

【讨论】：

【解决方案27】：

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

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

【讨论】：

我的 vue 文件甚至没有模板。那是我的问题。
@Stephan-v 这是一个单独的问题，我发布的是关于将 vue 实例安装到 dom 元素上。如果您使用el 属性，您需要有一个渲染函数或一个模板编译器，以便它可以解析 html 并构建内部渲染结构。如果您没有其中之一，则会出错，因为它无法编译实例。
我该怎么做才能解决这个问题
这个问题可能是由很多不同的问题引起的，请参阅here