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

Question

This is my main javascript file:这是我的主要 javascript 文件：

import Vue from 'vue'

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

My HTML file:我的 HTML 文件：

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

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

Webpack configuration of Vue.js with the runtime build:带有运行时构建的 Vue.js 的 Webpack 配置：

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

I am still getting this well known error:我仍然收到这个众所周知的错误：

[Vue warn]: Failed to mount component: template or render function not defined. [Vue 警告]：无法挂载组件：未定义模板或渲染函数。 (found in root instance) （在根实例中找到）

How come when I don't even have a single thing inside my #app div where I mount Vue, I am still getting a render/template error?当我在安装 Vue 的 #app div 中什至没有任何东西时，怎么会出现渲染/模板错误？ It says found in root but there is nothing to be found because it does not even have any content?它说found in root中找到但没有任何内容，因为它甚至没有任何内容？

How am I suppose to mount if this does not work?如果这不起作用，我该如何安装？

Edit:编辑：

I have tried it like this which seems to work:我试过这样似乎有效：

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

It make sense because using the el property implies you are 'scanning' that dom element for any components and it's useless because the runtime build does not have a compiler.这是有道理的，因为使用el属性意味着您正在“扫描”该 dom 元素以查找任何组件，并且它是无用的，因为运行时构建没有编译器。

Still it is an extremely strange error message to throw, especially when I have my entire #app div emptied out.仍然是一个非常奇怪的错误消息，尤其是当我清空整个#app div 时。

Hopefully somebody could confirm my thoughts.希望有人能证实我的想法。

Answer 1

In my case, I was getting the error because I upgraded from Laravel Mix Version 2 to 5.就我而言，我收到错误是因为我从 Laravel Mix 版本 2 升级到了 5。

In Laravel Mix Version 2, you import vue components as follows:在 Laravel Mix 版本 2 中，您可以按如下方式导入 vue 组件：

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

In Laravel Mix Version 5, you have to import your components as follows:在 Laravel Mix 版本 5 中，您必须按如下方式导入组件：

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

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

Here is the documentation: https://laravel-mix.com/docs/5.0/upgrade这是文档： https ://laravel-mix.com/docs/5.0/upgrade

Better, to improve performance of your app, you can lazy load your components as follows:更好的是，为了提高应用程序的性能，您可以延迟加载组件，如下所示：

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

Answer 2

If you used to calle a component like this:如果你曾经这样调用组件：

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

I suppose that problem occurred when you update to laravel mix 5.0 or another libraries, so you have to put .default.我想当你更新到 laravel mix 5.0 或其他库时会出现这个问题，所以你必须放 .default。 As like below:如下所示：

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

I solved the same problem.我解决了同样的问题。

Answer 3

The reason you're receiving that error is that you're using the runtime build which doesn't support templates in HTML files as seen here vuejs.org您收到该错误的原因是您使用的运行时构建不支持 HTML 文件中的模板，如vuejs.org 所示

In essence what happens with vue loaded files is that their templates are compile time converted into render functions where as your base function was trying to compile from your html element.本质上，vue 加载文件发生的情况是它们的模板在编译时转换为渲染函数，而您的基本函数试图从您的 html 元素进行编译。

Answer 4

In my case, I imported my component (in router) as:就我而言，我将组件（在路由器中）导入为：

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

It is simply solved if I changed it to如果我将其更改为

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

Answer 5

If someone else keeps getting the same error.如果其他人不断收到相同的错误。 Just add one extra div in your component template.只需在组件模板中添加一个额外的 div。

As the documentation says:正如文档所说：

Component template should contain exactly one root element组件模板应该只包含一个根元素

Check this simple example:检查这个简单的例子：

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

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

Answer 6

My previous code was我以前的代码是

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

when i got such errors then i just add .default to it and it worked..当我遇到此类错误时，我只需将.default添加到它，它就可以工作了..

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

Answer 7

In my case, I was using a default import:就我而言，我使用的是默认导入：

import VueAutosuggest from 'vue-autosuggest';

Using a named import fixed it: import {VueAutosuggest} from 'vue-autosuggest';使用命名导入修复它： import {VueAutosuggest} from 'vue-autosuggest';

Answer 8

There is an update from Laravel Mix 3 to Laravel 4 which may affect the answer for all components.从 Laravel Mix 3 到 Laravel 4 的更新可能会影响所有组件的答案。
See https://laravel-mix.com/docs/4.0/upgrade for more details.有关更多详细信息，请参阅https://laravel-mix.com/docs/4.0/upgrade 。

Let 'example-component' be the example component, whose address is './components/ExampleComponent.vue' .让'example-component'为示例组件，其地址为'./components/ExampleComponent.vue' 。

Laravel 3:拉拉维尔 3：

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

Laravel 4: Laravel 4：

The change is that a .default is added.变化是添加了.default 。

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

Answer 9

As a Summary of all the posts作为所有帖子的摘要

This error:这个错误：

[Vue warn]: Failed to mount component: template or render function not defined. [Vue 警告]：无法挂载组件：未定义模板或渲染函数。

You're getting because of a certain problem that's preventing your component from being mounted.由于某个问题导致您的组件无法安装，因此您得到了。

This can be caused by a lot of different issues , as you can see from the different posts here.这可能是由许多不同的问题引起的，您可以从这里的不同帖子中看到。 Debug your component thoroughly, and be aware of everything that is maybe not done correctly and might prevent the mount.彻底调试您的组件，并注意可能未正确完成并可能阻止安装的所有内容。

_{I was getting the error when my component file was not encoded correctly...}_{当我的组件文件未正确编码时出现错误...}

Answer 10

Something like this should resolve the issue..这样的事情应该可以解决这个问题..

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

Answer 11

I had this script in app.js in laravel which automatically adds all components in the component folder.我在 laravel 的 app.js 中有这个脚本，它会自动在组件文件夹中添加所有组件。

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

To make it work just add default要使其正常工作，只需添加默认值

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

Answer 12

I personally ran into the same error.我个人遇到了同样的错误。 None of the above solutions worked for me.以上解决方案都不适合我。

In fact, my component looks like this (in a file called my-component.js) :事实上，我的组件看起来像这样（在一个名为 my-component.js 的文件中）：

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

And I imported it like this in another component:我在另一个组件中像这样导入它：

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

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

The weird thing is that this worked in some components but not in this "parent_component".奇怪的是，这在某些组件中有效，但在此“parent_component”中无效。 So what I had to do in the component itself was stock it in a variable and export it as default.所以我必须在组件本身中做的是将它存储在一个变量中并将其导出为默认值。

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

export default MyComponent;

It could seem obvious but as I said above, it works in 1 other component without this so I couldn't really understand why, but at least, this works everywhere now.这似乎很明显，但正如我上面所说，它在没有这个的情况下可以在其他 1 个组件中工作，所以我无法真正理解为什么，但至少，现在到处都可以使用。

Answer 13

I cannot believe how did I fix the issue!我不敢相信我是如何解决这个问题的！ weird solution!奇怪的解决方案！
I kept the app running then I removed all template tags and again I returned them back and it worked!我让应用程序保持运行，然后我删除了所有模板标签，然后我再次将它们返回并且它工作了！ but I don't understand what happened.但我不明白发生了什么。

Answer 14

Make sure you import the .vue extension explicitly like so:确保像这样显式导入.vue扩展名：

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

If you don't add the .vue and you have a .ts file with the same name in that directory, for example, if you're separating the js/ts from the template and linking it like this inside of my-component.vue :如果您不添加.vue并且在该目录中有一个同名的.ts文件，例如，如果您将 js/ts 从模板中分离出来并在my-component.vue ：

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

... then the import will bring in the .ts by default and so there really is no template or render function defined because it didn't import the .vue template. ...然后默认情况下导入将引入.ts ，因此实际上没有定义模板或渲染函数，因为它没有导入.vue模板。

When you tell it to use .vue in the import, then it finds your template right away.当您告诉它在导入中使用.vue时，它会立即找到您的模板。

Answer 15

I am using Typescript with vue-property-decorator and what happened to me is that my IDE auto-completed "MyComponent.vue.js" instead of "MyComponent.vue".我正在使用带有 vue-property-decorator 的 Typescript，发生在我身上的是我的 IDE 自动完成了“MyComponent.vue.js”而不是“MyComponent.vue”。 That got me this error.这给了我这个错误。

It seems like the moral of the story is that if you get this error and you are using any kind of single-file component setup, check your imports in the router.故事的寓意似乎是，如果您遇到此错误并且您正在使用任何类型的单文件组件设置，请检查您在路由器中的导入。

Answer 16

When used with storybook and typescirpt, I had to add当与故事书和打字机一起使用时，我必须添加

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

I'll add this here b/c there seem to be a number of different reasons why this very frustrating error can appear.我将在此处添加此 b/c 似乎有许多不同的原因导致出现此非常令人沮丧的错误。 In my case, it was a question of syntax in my import statement.就我而言，这是我的import语句中的语法问题。 I had我有

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

when I should have had当我应该有的时候

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

Your project setup and configuration may vary but if you're getting this error I suggest that you check that the import syntax for your component is as expected for your project.您的项目设置和配置可能会有所不同，但如果您收到此错误，我建议您检查组件的导入语法是否符合项目的预期。

Answer 18

in my case, it worked for me就我而言，它对我有用

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

Answer 19

This error was for me because of wrong import这个错误对我来说是因为错误的导入

instead反而

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

write写

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

Answer 20

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

Answer 21

Try adding .default in you require component尝试在需要组件中添加 .default

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

Answer 22

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

而是使用这个

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

Answer 23

I got same error before I forgot to enclose component content in template element.在忘记将组件内容包含在template元素中之前，我遇到了同样的错误。

I have this initially我最初有这个

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
        },
    ]
});

Then in Home.vue I have:然后在Home.vue我有：

<h1>Hello Vue</h1>

Hence the error:因此错误：

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

found in

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

Enclosing in element fixed the error:包含在元素中修复了错误：

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

Answer 24

Yet another idea to throw in to the mix... In my case, the component throwing the error was a template-less component with a custom render() function.另一个想法是混合在一起......在我的例子中，引发错误的组件是一个具有自定义render()函数的无模板组件。 I couldn't see why it wasn't working, until I realised that I hadn't put <script> ... </script> tags around the code in the component (seemed unnecessary, since I had no template or style tags either).我不明白为什么它不起作用，直到我意识到我没有在组件中的代码周围放置<script> ... </script>标签（似乎没有必要，因为我没有模板或样式标签任何一个）。 Not sure why this got past the compiler...?不知道为什么这会通过编译器......？

Either way... make sure you use your <script> tags ;-)无论哪种方式...确保您使用<script>标签 ;-)

Answer 25

Similar issue here in my visual.ts file i had to change:我的visual.ts文件中的类似问题我不得不更改：

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

Answer 26

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

In my case ,my child component was blank !就我而言，我的子组件是空白的！ And i was importing it in parent component without any template,script or style(complete blank child.vue file).我在没有任何模板、脚本或样式的父组件中导入它（完整的空白 child.vue 文件）。 So i just added above template in my child component and its working fine.所以我只是在我的子组件中添加了上面的模板并且它工作正常。

Answer 27

That was a mistake when I worked at Laravel.当我在 Laravel 工作时，这是一个错误。 The code that worked for me对我有用的代码

//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 28

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

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

问题描述

28 个解决方案

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

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

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

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

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

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

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

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

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

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

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

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

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

解决方案14
3 2020-02-05 17:49:12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

问题描述

28 个解决方案

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

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

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

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

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

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

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

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

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

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

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

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

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

解决方案14 3 2020-02-05 17:49:12

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

解决方案14
3 2020-02-05 17:49:12

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

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

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

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

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

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

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

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

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

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

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

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

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

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