导入组件时未找到 VueJS 模块错误

Posted 2023-02-23

【中文标题】导入组件时未找到 VueJS 模块错误

【英文标题】：VueJS Module not found error while importing the components

【发布时间】：2018-12-20 03:36:57

【问题描述】：

我有一个应用程序，我在其中使用 <router-view/>! 加载组件！

我在router.js 中导入组件时遇到问题。它总是给我以下错误：

These relative modules were not found:

* ./components/Poetry.vue in ./src/router/routes.js
* ./components/PoetryDetails/PoetryCard.vue in ./src/router/routes.js
* ./components/PoetryDetails/Search.vue in ./src/router/routes.js

我的文件夹结构是这样的：

├── _components
|   ├── _PoetryDetails
|   |   └──PoetryCard.vue
|   |   └──Search.vue
|   └── Poetry.vue
├── _router
|   ├── index.js (routes.js is imported in this file)
|   └── routes.js
├── App.vue
└── main.js

在routes.js中，我导入组件如下：

import Poetry from './components/Poetry.vue'
import PoetryCard from './components/PoetryDetails/PoetryCard.vue'
import PoetrySearch from './components/PoetryDetails/Search.vue'

export const routes = [
     path: '', name: 'poetrysearch', component: Poetry, children: [
         path: 'poetry', name: 'poetrycard', component: PoetryCard ,
         path: 'poetry/search', name: 'poetrysearch', component: PoetrySearch ,
    ],
]

但是，我仍然遇到该死的错误。请帮忙。

【参考方案1】：

您正在使用相对路径。在您的routes.js 中，应该是

import Poetry from '../components/Poetry.vue'
import PoetryCard from '../components/PoetryDetails/PoetryCard.vue'
import PoetrySearch from '../components/PoetryDetails/Search.vue'

.. 符号表示转到父文件夹。

如果你使用的是 webpack，你可以添加别名：

  resolve: 
    extensions: ['.js', '.vue', '.json'],
    alias: 
      ...
      '@': resolve('src'), // your source folder
    
  

然后你就可以导入了：

import Poetry from '@/components/Poetry.vue'
import PoetryCard from '@/components/PoetryDetails/PoetryCard.vue'
import PoetrySearch from '@/components/PoetryDetails/Search.vue'

【讨论】：

感谢您的回答，但我仍然收到此错误：* ../main in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/PoetryDetails/Search.vue, ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/PoetryDetails/PoetryCard.vue

实际上，这些组件首先在/components 中，然后我创建了一个新文件夹并将这些组件（PoetryCard.vue 和Search.vue）移动到该文件夹​​中。从那以后，我收到了这个烦人的错误。

发现错误。实际上，我也在这些文件中做了一些导入，所以我也需要在那里进行更改，感谢@！