Шаблон Vue или функция рендеринга еще не определены. Я не использую ни один из них?

Это мой главный файл 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 с помощью сборки времени выполнения:

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

Я все еще получаю эту известную ошибку:

[Vue warn]: Не удалось установить компонент: шаблон или функция рендеринга не определены. (найденный в корневом экземпляре)

Почему, когда у меня нет ни одной вещи внутри моего #app div, где я монтирую Vue, я все равно получаю ошибку render/template? Он говорит, что found in root но ничего не найти, потому что у него даже нет контента?

Как я могу подойти, если это не сработает?

Редактировать:

Я пробовал это, как будто это работает:

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

Это имеет смысл, поскольку использование свойства el подразумевает, что вы "сканируете" этот элемент dom для любых компонентов, и это бесполезно, потому что в компоновке времени выполнения нет компилятора.

Тем не менее это чрезвычайно странное сообщение об ошибке, особенно когда у меня весь мой #app div опустел.

Надеюсь, кто-то может подтвердить мои мысли.

ОТВЕТЫ

Ответ 1

Причина, по которой вы получаете эту ошибку, заключается в том, что вы используете сборку во время выполнения, которая не поддерживает шаблоны в файлах HTML, как показано здесь vuejs.org

В сущности, что происходит с загруженными vue файлами, так это то, что их шаблоны во время компиляции преобразуются в функции рендеринга, когда ваша базовая функция пыталась скомпилировать из html-элемента.

Ответ 2

я просто добавить по умолчанию после пути компонентов, как

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

у меня это сработало.. спасибо @Justin MacArthur

Ответ 3

В моем случае я импортировал свой компонент (в маршрутизаторе) как:

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

Это просто решено, если я изменил это на

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

Ответ 4

Если кто-то другой продолжает получать ту же ошибку. Просто добавьте один дополнительный div в свой шаблон компонента.

Как говорится в документации:

Шаблон компонента должен содержать ровно один корневой элемент

Проверьте этот простой пример:

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

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

Ответ 5

В моем случае я получал сообщение об ошибке, потому что я обновил Laravel Mix версии 2 до 5.

В Laravel Mix Version 2 компоненты vue импортируются следующим образом:

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

В версии 5 Laravel Mix вы должны импортировать компоненты следующим образом:

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

Ответ 6

Я использую Typescript с vue-property-decorator, и что случилось со мной, так это то, что моя IDE автоматически заполнила "MyComponent.vue.js" вместо "MyComponent.vue". Это дало мне эту ошибку.

Кажется, что мораль этой истории в том, что если вы получаете эту ошибку и используете какой-либо отдельный компонент установки файла, проверьте свой импорт в маршрутизаторе.

Ответ 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;

Это может показаться очевидным, но, как я уже сказал выше, он работает в одном другом компоненте без этого, поэтому я не мог понять, почему, но, по крайней мере, сейчас это работает везде.

Ответ 8

Я не могу поверить, как я решил проблему! странное решение!
Я оставил приложение запущенным, затем удалил все теги шаблонов и снова вернул их обратно, и это сработало! но я не понимаю, что случилось.

Ответ 9

Я получил ту же ошибку, прежде чем я забыл заключить содержимое компонента в элемент 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>

Ответ 10

В моем случае я использовал импорт по умолчанию:

import VueAutosuggest from 'vue-autosuggest';

Использование именованного импорта исправило это: import {VueAutosuggest} from 'vue-autosuggest';

Ответ 11

Примерно так должно решить проблему..

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

Ответ 12

При использовании с сборником рассказов и набором текста мне пришлось добавить

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