[Vue warn]: Fehler beim Mounten der Komponente: Vorlage oder Renderfunktion nicht definiert. Fehler

Question

Ich versuche, eine Vue App zu bauen, aber ich bin immer diese Fehlermeldung auf der Konsole:

[Vue warnen]: Fehler Komponente montieren: Vorlage oder Render-Funktion nicht definiert.

Dies ist mein Code:

header.vue

<header> 
    <div class="page-logo">Foo.com</div> 
</header> 
<nav> 
    <ul class="nav"> 
     <li>My Account</li> 
     <li>Log In</li> 
     <li>Log Out</li> 
     <li>Sign Up</li> 
    </ul> 
</nav> 
</header> 

Das ist mein app.js:

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import $ from 'jquery' 
Vue.use(VueRouter) 

var App = (function (App) { 
    App.appComp = { 
     header : Vue.component('mainMenu', require('./components/app/header.vue')) 
    }; 
    const router = new VueRouter({ 
    routes: [ 
     { 
      path: '/', 
      components: { 
      header: App.appComp.header, 
      } 
     } 
     ] 
    }); 
    App.app = new Vue({ 
     router 
    }).$mount('#app'); 
    return App; 
})(App || {}); 

Und ich versuche, dies mit Laravel Mix zu bauen. Aber ich habe diesen Fehler in der Konsole:

[Vue warn]: Fehler Komponente montieren: Vorlage oder Render-Funktion nicht definiert. in ---> bei /opt/lampp/htdocs/gif/resources/assets/js/components/app/header.vue gefunden

ich in google gesucht und ich fand diese Antwort: Vue template or render function not defined yet I am using neither?

Also habe ich versucht, die Definition in Mix zu überschreiben. Ich tat:

mix.webpackConfig({ 
    resolve: { 
     alias: { 
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1 
     } 
    } 
}); 

Das hat nicht funktioniert, so dass ich versuchte, die webpack Konfigurationsdatei

ich dort diese Zeile gefunden zu ändern:

module.exports.resolve = { 
    extensions: ['*', '.js', '.jsx', '.vue'], 

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

ich mit esm gemeinsam zu ersetzen versucht, hat nicht geholfen.

Was soll ich tun?

Answer 1

Ihre HTML in einer einzigen Datei Komponente muss in template Tags gewickelt werden.

<template> 
    <div> 
    <header> 
     <div class="page-logo">Foo.com</div> 
    </header> 
    <nav> 
     <ul class="nav"> 
     <li>My Account</li> 
     <li>Log In</li> 
     <li>Log Out</li> 
     <li>Sign Up</li> 
     </ul> 
    </nav> 
    </div> 
<template>