未找到模块：错误：无法解析 | Vue路由器

Posted 2023-03-14

【中文标题】未找到模块：错误：无法解析 | Vue路由器

【英文标题】：Module not found: Error: Can't resolve | Vue Router

【发布时间】：2020-08-27 01:43:25

【问题描述】：

我是 vue 和 laravel 的新手。我正在尝试导入我的组件，但出现此错误。

./resources/js/router.js 中的错误 未找到模块：错误：无法解析“./pages/frontend/HomepageComponent”

路由器.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomepageComponent from './pages/frontend/HomepageComponent'

Vue.use(VueRouter)

const routes = [

    path: '/',
    component: HomepageComponent

]

export default new VueRouter(
    routes
)

我到处搜索，但我无法弄清楚如何解决这个问题。

请帮帮我。

【问题讨论】：

您是否验证了组件名称HomepageComponent.vue？

HomepageComponent.vue 是否位于/resources/js/pages/frontend/ 目录中？

是的，名字和位置都很好。

能否也分享一下 HomepageComponent 文件？

它在 router.js 文件中显示错误：import HomepageComponent from './pages/frontend/HomepageComponent'

【参考方案1】：

尝试将 .vue 添加到文件的导入中

从 './pages/frontend/HomepageComponent' 导入 HomepageComponent

看起来像：

从 './pages/frontend/HomepageComponent.vue' 导入 HomepageComponent

如果我没记错的话，默认情况下导入会查找 .js 文件扩展名，因此您必须具体说明您正在查找 .vue 文件。

编辑：解决方案与上述答案无关，问题是组件文件名中的拼写错误。

【讨论】：

能否分享您的 HomepageComponent 中代码的屏幕截图以及您的文件夹和文件结构的另一个屏幕截图？

我的资源文件的代码在这个link 中我还发现我的错误在 HomepageComponent.vue 因为当我用 ExampleComponent 替换 HomepageComponent 时它工作正常。

呃，我认为这归结为您的文件朋友中的拼写错误。您的 HomepageComponent 文件拼写错误“HompageComponent”缺少“Home”中的“e”

【参考方案2】：

运行命令

npm install --save vue-router

【参考方案3】：

我解决了这个问题

npm install --save vue-router