2017-02-01 5 views
1

Dies ist mein Haupt-JavaScript-Datei:Vue Vorlage oder Renderfunktion noch nicht definiert Ich verwende keine?

import Vue from 'vue' 

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

Meine HTML-Datei:

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

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

Webpack Konfiguration von Vue.js mit der Laufzeit Baujahr:

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

ich noch immer diese bekannter Fehler:

[Vue warn]: Failed to mount component: template or render function not defined. (found in root instance)

Wie kommt es, wenn ich noch nicht einmal eine einzige Sache in meinem #app div habe, wo ich Vue einrichte, bekomme ich immer noch einen Render/Template-Fehler? Es heißt found in root, aber es gibt nichts zu finden, weil es nicht einmal Inhalt hat?

Wie soll ich mounten, wenn das nicht funktioniert?

Edit:

ich es so versucht haben, die zu funktionieren scheint:

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

es sinnvoll, weil mit der el Eigenschaft bedeutet, dass Sie ‚Scannen‘, dass dom Element für alle Komponenten und es ist nutzlos, weil der Laufzeit-Build keinen Compiler hat.

Noch ist es eine extrem seltsame Fehlermeldung zu werfen, vor allem wenn ich meine gesamte #App div geleert habe.

Hoffentlich konnte jemand meine Gedanken bestätigen.

Antwort

4

Der Grund, warum Sie diese Fehler sind erhalten, ist, dass Sie die Laufzeit Build verwenden, die keine Vorlagen in HTML-Dateien unterstützt das wie hier vuejs.org gesehen

Im Wesentlichen, was mit vue Dateien geladen passiert sind, dass ihre Vorlagen Die Kompilierzeit wird in Render-Funktionen konvertiert, wobei Ihre Basisfunktion versucht, aus Ihrem HTML-Element zu kompilieren.

+0

Meine vue Dateien Vorlagen haben nicht einmal. Das ist mein Problem. –

+0

@ Stephan-v Das ist ein separates Problem. Was ich gepostet habe, war das Mounten einer Vue-Instanz auf ein Dom-Element. Wenn Sie das Attribut 'el' verwenden, müssen Sie entweder eine Renderfunktion oder einen Vorlagencompiler haben, damit das HTML analysiert und die interne Wiedergabestruktur erstellt werden kann. Wenn Sie keinen dieser Fehler haben, wird ein Fehler auftreten, da die Instanz nicht kompiliert werden kann. –

2

Wenn jemand anders den gleichen Fehler erhält. Fügen Sie einfach ein zusätzliches Div in Ihrer Komponentenvorlage hinzu.

Da die Dokumentation sagt:

Component template should contain exactly one root element

prüfen dieses einfache Beispiel:

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

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