如何在 Laravel + Vue 中修复“未找到此相关模块”答案

【问题标题】：How to fix "This relative module was not found " in Laravel + Vue如何在 Laravel + Vue 中修复“未找到此相关模块”
【发布时间】：2023-04-07 20:02:01
【问题描述】：

对不起，我是 laravel 的新手，使用 vue 构建单页应用程序。我在我的案例中做了很多试验，但仍然没有工作

我真的很想在另一个 vue 组件中导入 vue 组件，这意味着是“嵌套组件”。
但是当我保存 npm run watch 工作的原因时，给我一个关于“找不到这个相关模块”的错误

这将从名为 Hello.vue

的“resource/js/component”组件导入

<template>
<h1> hello </h1>
</template>

<script>
export default {
  name:'Hello'
}
</script>

这将得到一个导入 Hello.vue

<template>
<h1> world</h1>
</template>

<script>

import Hello from './js/component/Hello

export default {
  name:'Hello'
}
</script>

任何帮助将不胜感激。在此先感谢:-)

【问题讨论】：

您是否尝试将 hello 组件导入到 hello 组件中？？
是的，先生，我真的很想导入那个组件，但是我出错了

标签： laravel vue.js

【解决方案1】：

你在这里问的是Recursive Components。

使用递归组件时，您不需要导入它们，因为它们是您要使用的组件。您只需要确保它有一个 name 并且组件模板中的元素与该名称匹配（不区分大小写

<template>
    <div>
        <h1>hello</h1>

        <hello></hello>
    </div>
</template>

<script>
    export default {
        name: 'Hello'
    }
</script>

上面的代码实际上会导致错误，因为它本质上是在创建一个无限循环，因此您需要在组件中设置一些条件来防止这种情况，例如

<template>
    <div>
        <h1> hello </h1>

        <hello v-if="showNested" show-nested="false"></hello>
    </div>
</template>

<script>
    export default {

        props: {
            showNested: {
                default() {
                    return true;
                }
            }
        },

        name: 'Hello'
    }
</script>

显然，我想您知道为什么要嵌套组件，以便可以相应地编写逻辑。

至于您遇到的错误，我想这是因为您为导入提供的路径。

当使用require 或import 时，. 指的是当前目录，因此假设Hello 组件的路径是：

resources/js/component/Hello.vue

您实际上已尝试导入：

resources/js/component/js/component/Hello

现在这几乎不是问题，但我想我会指出这一点。

【讨论】：