来自 Vue.js 的组件未加载到 Laravel 刀片中

Posted 2023-02-22

【中文标题】来自 Vue.js 的组件未加载到 Laravel 刀片中

【英文标题】：Components from Vue.js are not loaded in Laravel blade

【发布时间】：2019-11-09 10:03:51

【问题描述】：

为 laravel 5.4 项目安装了带有节点模块的 vue js，但是在我运行 npm run watch 后组件不显示

安装了 npm，安装了 vue.js 在 app.js 中添加了 vue.js 文件示例，npm run watch - 没有结果

刀片模板文件

  <div id="app">
      <h1>Test</h1>
      <h2>asda</h2>
      <example-component></example-component>
  </div>

App.js

 import Vue from 'vue';

 Vue.component('example-component', 
 require('./components/ExampleComponent.vue'));



    //Set toaster duration
    Vue.config.productionTip = false

    new Vue(
        el: '#app',
        components: 

        
  )

组件应该在页面刷新后加载，但不是。控制台中没有任何错误消息。

【问题讨论】：

清理浏览器缓存，刀片文件中是否导入了app.js文件？

清除了浏览器缓存和视图缓存，仍然没有加载。如果我是通过 npm 安装的，是否应该在刀片中手动导入 app.js 文件？

是的，你应该自己做

【参考方案1】：

如果你使用 Webpack，你应该在require(...) 后面加上.default，这样它就变成了require(...).default。 Laravel Git 中的示例 确保您在组件中使用export default。 Laravel Git 中的示例

【讨论】：

在 app.js 中添加了 .default 但没有帮助。在示例组件中，我有导出默认功能。通常 npm 和 vue install 足以从刀片运行模板。