webpack - [Vue 警告] : Failed to mount component: template or render function not defined. 错误

Question

我正在尝试构建一个 Vue 应用程序，但我在控制台上收到此错误:

[Vue warn]: Failed to mount component: template or render function not defined.

这是我的代码:

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>

这是我的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 || {}); 

我正在尝试使用 laravel Mix 构建它。但是我在控制台中收到此错误:

[Vue warn]: Failed to mount component: template or render function not defined. found in ---> at /opt/lampp/htdocs/gif/resources/assets/js/components/app/header.vue

我在谷歌中搜索并找到了这个答案:Vue template or render function not defined yet I am using neither?

所以我试图覆盖 mix 中的定义。我做了:

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

那没有用，所以我尝试更改 webpack 配置文件

我在那里找到了这一行:

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

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

我尝试用 esm 替换 common，但没用。

我还应该做什么？

Answer 1

您在单个文件组件中的 HTML 需要包装在 template 标签中。

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