Question

我正在尝试构建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警告]：无法安装组件：未定义模板或渲染功能。发现于---＆gt; 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.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代替普通，没有帮助。

我还应该做些什么？

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>

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

1 个答案: