堆栈内存溢出
  繁体   English   中英

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

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

 原文  2017-02-01 15:39:42  2   28    javascript/ vuejs2/ vue-component/ vue.js

问题描述

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

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

28 个解决方案

解决方案1
 75  2019-09-24 18:36:06

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

解决方案2
 55  2019-12-31 02:46:53

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

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

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

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

我解决了同样的问题。

解决方案3
 37 已采纳  2017-02-01 16:27:35

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

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

解决方案4
 31  2018-10-25 11:20:36

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

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

如果我将其更改为

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

解决方案5
 14  2017-08-01 17:26:53

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

正如文档所说：

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

检查这个简单的例子：

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

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

解决方案6
 11  2020-06-07 05:27:21

我以前的代码是

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

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

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

解决方案7
 8  2019-07-19 15:17:44

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

import VueAutosuggest from 'vue-autosuggest';

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

解决方案8
 8  2020-01-08 13:50:11

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

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

拉拉维尔 3：

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

Laravel 4：

变化是添加了.default 。

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

解决方案9
 7  2020-01-08 19:36:27

作为所有帖子的摘要

这个错误：

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

由于某个问题导致您的组件无法安装，因此您得到了。

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

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

解决方案10
 6  2019-10-10 16:02:23

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

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

解决方案11
 4  2020-06-22 13:31:14

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

解决方案12
 3  2018-09-25 10:16:50

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

事实上，我的组件看起来像这样（在一个名为 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 个组件中工作，所以我无法真正理解为什么，但至少，现在到处都可以使用。

解决方案13
 3  2019-06-22 04:12:20

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

解决方案14
 3  2020-02-05 17:49: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时，它​​会立即找到您的模板。

解决方案15
 2  2019-06-30 22:50:15

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

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

解决方案16
 2  2019-10-11 05:08:02

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

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

解决方案17
 1  2020-05-06 15:54:46

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

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

当我应该有的时候

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

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

解决方案18
 1  2021-06-22 17:59:08

就我而言，它对我有用

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

解决方案19
 1  2021-10-02 18:53:45

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

反而

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

写

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

解决方案20
 1  2021-10-12 11:09:39

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

解决方案21
 1  2021-11-18 19:09:22

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

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

解决方案22
 1  2022-02-21 11:18:28

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

而是使用这个

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

解决方案23
 0  2019-07-02 12:01:00

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

解决方案24
 0  2021-02-16 11:53:16

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

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

解决方案25
 0  2021-04-07 17:35:54

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

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

解决方案26
 0  2021-06-23 17:40:32

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

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

解决方案27
 0  2021-09-18 13:04:11

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

解决方案28
 0  2021-12-05 12:33:13

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Vue 模板或渲染 function 未定义 生成Vue项目时出现错误“无法安装组件：模板或渲染功能未定义” 尽管使用了完整的编译器捆绑包，但Vue中的“无法安装组件：模板或渲染功能未定义” 无法安装组件：模板或渲染函数未定义-使用Laravel-mix时出现vue警告 无法挂载组件：模板或渲染函数未使用 vue.js 定义 Laravel - [Vue 警告]：无法挂载组件：未定义模板或渲染函数 Gulp [Vue 警告]：无法挂载组件：未定义模板或渲染函数 Vue警告：无法安装组件：未定义模板或渲染功能 Vue.js 无法挂载组件：未定义模板或渲染函数 如何修复无法挂载组件：vue 中未定义模板或渲染函数
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM