[Vue 警告]：无法挂载组件：未定义模板或渲染函数。错误

Posted 2023-02-22

【中文标题】[Vue 警告]：无法挂载组件：未定义模板或渲染函数。错误

【英文标题】：[Vue warn]: Failed to mount component: template or render function not defined. Error

【发布时间】：2017-10-20 16:01:03

【问题描述】：

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

[Vue 警告]：挂载组件失败：未定义模板或渲染函数。

这是我的代码：

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 警告]：无法挂载组件：未定义模板或渲染函数。 在 ---> 在 /opt/lampp/htdocs/gif/resources/assets/js/components/app/header.vue 中找到

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

所以我试图覆盖 mix.xml 中的定义。我做到了：

 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，没有帮助。

我还应该做什么？

【参考方案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>

【讨论】：

嗨，谢谢，它可以工作，但你知道，模板标签内不能有两个根元素，你需要用div包装它们，我知道当我得到添加template 标签时出错

@NatiV 没错！我将在答案中添加一个 div。我应该抓住那个 /facepalm