2

我正在尝试构建一个 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 both?

所以我试图覆盖 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，没有帮助。

我还应该做什么？

4

1 回答 1

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>
于 2017-05-20T16:43:00.973 回答