Laravel 6 + Vue.js 无法挂载组件：未定义模板或渲染函数

Posted 2023-02-22

【中文标题】Laravel 6 + Vue.js 无法挂载组件：未定义模板或渲染函数

【英文标题】：Laravel 6 + Vue.js Failed to mount component: template or render function not defined

【发布时间】：2020-05-12 20:24:23

【问题描述】：

也许有人可以帮助我？我正在尝试从 here 创建一个小聊天应用程序，但无法显示 Vue 组件。

开发工具控制台为我提供：

未能挂载组件：未定义模板或渲染函数。

我正在使用 Laravel 6 感谢对此的任何帮助！谢谢:)

在添加 .default 之后，我尝试删除 node_modules 文件夹并重建 - 没有运气。

app.js

require('./bootstrap');

window.Vue = require('vue');

/**
 * The following block of code may be used to automatically register your
 * Vue components. It will recursively scan this directory for the Vue
 * components and automatically register them with their "basename".
 *
 * Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
 */

 const files = require.context('./', true, /\.vue$/i)
 files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

Vue.component('chat-messages', require('./components/ChatMessages.vue').default);
Vue.component('chat-form', require('./components/ChatForm.vue').default);

import Vue from 'vue'
const app = new Vue(
    el: '#app',

    data: 
        messages: []
    ,

    created() 
        this.fetchMessages();
        Echo.private('chat')
        .listen('MessageSent', (e) => 
          this.messages.push(
            message: e.message.message,
            user: e.user
          );
        );

    ,

    methods: 
        fetchMessages() 

            axios.get('/messages').then(response => 
                this.messages = response.data;
            );

        ,

        addMessage(message) 
            this.messages.push(message);

            axios.post('/messages', message).then(response => 
              console.log(response.data);
            );
        
    
);

和我的两个组件： ChatForm.vue

<template>
    <div class="input-group">
        <input id="btn-input" type="text" name="message" class="form-control input-sm" placeholder="Type your message here..." v-model="newMessage" @keyup.enter="sendMessage">
        <span class="input-group-btn">
            <button class="btn btn-primary btn-sm" id="btn-chat" @click="sendMessage">
                Send
            </button>
        </span>
    </div>
</template>

<script>
    export default 
        props: ['user'],

        data() 
            return 
                newMessage: ''
            
        ,

        methods: 
            sendMessage() 
                this.$emit('messagesent', 
                    user: this.user,
                    message: this.newMessage
                );

                this.newMessage = ''
            
            
    
</script>

ChatMessage.vue

<template>
    <ul class="chat">
        <li class="left clearfix" v-for="message in messages" v-bind:key="message">
            <div class="chat-body clearfix">
                <div class="header">
                    <strong class="primary-font">
                         message.user.name 
                    </strong>
                </div>
                <p>
                     message.message 
                </p>
            </div>
        </li>
    </ul>
</template>

<script>
  export default 
    props: ['messages']
  ;
</script>

【问题讨论】：

尝试使用导入：import ChatMessage from './components/ChatMessage'; Vue.component('chat-form', ChatMessage); ChatForm 相同。

【参考方案1】：

如果不只是告诉我寻找新的解决方案，这可能会帮助您解决问题。首先在你的 app.js 中删除它

const files = require.context('./', true, /\.vue$/i)
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))

接下来，也删除这段代码，你已经导入了两次 vue。

import Vue from 'vue'