Это мой главный файл 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 опустел.
Надеюсь, кто-то может подтвердить мои мысли.
Причина, по которой вы получаете эту ошибку, заключается в том, что вы используете сборку во время выполнения, которая не поддерживает шаблоны в файлах HTML, как показано здесь vuejs.org
В сущности, что происходит с загруженными vue файлами, так это то, что их шаблоны во время компиляции преобразуются в функции рендеринга, когда ваша базовая функция пыталась скомпилировать из html-элемента.
я просто добавить по умолчанию после пути компонентов, как
Vue.component('yourComponentsName', require('./components/yourComponentsName.vue').default);
у меня это сработало.. спасибо @Justin MacArthur
В моем случае я импортировал свой компонент (в маршрутизаторе) как:
import bsw from 'common-mod/src/components/webcommon/webcommon'
Это просто решено, если я изменил это на
import bsw from 'common-mod/src/components/webcommon/webcommon.vue'
Если кто-то другой продолжает получать ту же ошибку. Просто добавьте один дополнительный div в свой шаблон компонента.
Как говорится в документации:
Шаблон компонента должен содержать ровно один корневой элемент
Проверьте этот простой пример:
import yourComponent from '{path to component}'
export default {
components: {
yourComponent
},
}
// Child component
<template>
<div> This is the one! </div>
</template>
В моем случае я получал сообщение об ошибке, потому что я обновил 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"));
Я использую Typescript с vue-property-decorator, и что случилось со мной, так это то, что моя IDE автоматически заполнила "MyComponent.vue.js" вместо "MyComponent.vue". Это дало мне эту ошибку.
Кажется, что мораль этой истории в том, что если вы получаете эту ошибку и используете какой-либо отдельный компонент установки файла, проверьте свой импорт в маршрутизаторе.
Я лично столкнулся с той же ошибкой. Ни одно из вышеперечисленных решений не помогло мне.
Фактически, мой компонент выглядит следующим образом (в файле 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;
Это может показаться очевидным, но, как я уже сказал выше, он работает в одном другом компоненте без этого, поэтому я не мог понять, почему, но, по крайней мере, сейчас это работает везде.
Я не могу поверить, как я решил проблему! странное решение!
Я оставил приложение запущенным, затем удалил все теги шаблонов и снова вернул их обратно, и это сработало! но я не понимаю, что случилось.
Я получил ту же ошибку, прежде чем я забыл заключить содержимое компонента в элемент 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>
В моем случае я использовал импорт по умолчанию:
import VueAutosuggest from 'vue-autosuggest';
Использование именованного импорта исправило это: import {VueAutosuggest} from 'vue-autosuggest';
Примерно так должно решить проблему..
Vue.component(
'example-component',
require('./components/ExampleComponent.vue').default);
При использовании с сборником рассказов и набором текста мне пришлось добавить
.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;
};