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

Question

我有一个应用程序，我使用<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 },
    ]},
]

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

Answer 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'