将 Vue.js 安装到 Laravel 后无法加载示例组件

Posted 2023-02-23

【中文标题】将 Vue.js 安装到 Laravel 后无法加载示例组件

【英文标题】：Cannot load example-component after installation of Vue.js to Laravel

【发布时间】：2021-08-20 08:23:38

【问题描述】：

您好，我在使用 laravel 运行 vue.js 时遇到问题。我刚刚安装了 laravel + vue 的全新安装，当我尝试将 example-component 添加到我的刀片中时没有发生任何事情......我在控制台中收到此错误：

app.js:19073 Uncaught TypeError: Cannot read property 'component' of undefined
    at Object../resources/js/app.js (app.js:19073)

指的是这一行

Vue.component('example-component', __webpack_require__(/*! ./components/ExampleComponent.vue */ "./resources/js/components/ExampleComponent.vue").default);

我的应用程序。 js看起来像这样我什么都没改变。

require('./bootstrap');

window.Vue = require('vue').default;
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue(
    el: '#app',
);

在我的刀片中，我只使用了<example-component> </example-component> 标签。是的，在 js/components/ExampleComponent 中确实是创建了示例组件。请问还有什么问题？

【参考方案1】：

将 app.js 更改为这个已解决的 mz 问题。 laravel 生成的默认 app.js 可能是针对 Vue2 的，我使用的是 Vue3

import  createApp  from 'vue';

require('./bootstrap');
let app=createApp()
app.component('example-component', require('./components/ExampleComponent.vue').default);
app.mount("#app")