VueJS 3 + Laravel：未捕获的类型错误：无法读取未定义的属性“组件”

Posted 2023-02-23

【中文标题】VueJS 3 + Laravel：未捕获的类型错误：无法读取未定义的属性“组件”

【英文标题】：VueJS 3 + Laravel : Uncaught TypeError: Cannot read property 'component' of undefined

【发布时间】：2021-04-19 23:41:48

【问题描述】：

大家好，我在我的 Laravel 项目中启动 Vue 没有什么问题。

这是我的 package.json

"devDependencies": 
        "@fortawesome/fontawesome-svg-core": "^1.2.32",
        "@fortawesome/free-brands-svg-icons": "^5.15.1",
        "@fortawesome/free-regular-svg-icons": "^5.15.1",
        "@fortawesome/free-solid-svg-icons": "^5.15.1",
        "@vue/compiler-sfc": "^3.0.5",
        "axios": "^0.21",
        "bootstrap": "^4.0.0",
        "jquery": "^3.2",
        "laravel-mix": "^6.0.0-beta.17",
        "laravel-mix-vue3": "^0.7.0",
        "lodash": "^4.17.19",
        "popper.js": "^1.12",
        "postcss": "^8.1.14",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^3.0.5",
        "vue-loader": "^16.1.2",
        "vue-template-compiler": "^2.6.10"
    

Webpack 组合：

mix.js('resources/js/app.js', 'public/js')
    .vue()
    .sass('resources/sass/app.scss', 'public/css');

这是我的 app.js

/**
 * First we will load all of this project's javascript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');
require('./fontawesome');

window.Vue = require('vue').default;

/**
 * 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('user-info', require('./components/UserInfo.vue').default);

/**
 * Next, we will create a fresh Vue application instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

const app = new Vue(
    el: '#app',
);

我有组件 UserInfo，我包含在我的 Blade.php 中，我得到 Uncaught TypeError: Cannot read property 'component' of undefined

【问题讨论】：

你要使用 vue 3 吗？

我使用 vue 3 升级，因为使用 vue 2 会出现同样的错误

【参考方案1】：

在 Vue 3 中全局发生了变化，你必须使用 createApp 函数来创建应用实例：

import  createApp  from 'vue';
require('./bootstrap');
require('./fontawesome');

let app=createApp()
app.component('user-info', require('./components/UserInfo.vue').default);
app.mount("#app")

有关使用 vue 3 和 laravel 设置完整应用程序的更多信息，请查看此answer

【讨论】：

非常感谢 .. 现在 vue 加载到 Laravel 中 .. 仅在控制台中显示：[Vue 警告]：模板编译错误：具有副作用的标签（

不客气，问题可能来自UserInfo.vue，请通过添加内容来编辑您的问题