vue/cli项目Webpack打包工具内组件引入问题

Question

为什么我的vue/cli项目在router内导入home却不能找到模块？

以下报错：
ERROR Failed to compile with 1 errors 09:10:59

This dependency was not found:

• src/components/pages/home in ./src/router/index.js

To install it, you can run: npm install --save src/components/pages/home
之前还显示下面报错：

• ../components/pages/home in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/components/pages/index.vue

下面src/router代码：

import Vue from 'vue' 
import Router from 'vue-router'
import Index from '@/components/pages/index'
import Home from 'src/components/pages/home'

Vue.use(Router)


export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index, 
      children:[
        {
          path:'/home',
          components:Home
        }
      ]
    }
    
  ]
  
})

下面src/components/pages/home.vue文件内代码：

<template lang="html">
   <div>
   主界面
   </div>
</template>

<script>
   export default{
      name:"home"
   } 
</script>

<style lang="css">

</style>

下面是我想放置home组件的src/components/pages/index.vue内代码：

```javascript
<template lang="html">
<div class="index">
    
     <ul>
        <li>
          <img src="~@/assets/logo2.jpg" alt="">    
        </li>
        <li>
        
        歌手
        
        </li>
        <li>
        榜单
        </li>
        <li>
        我的    
        </li>
        <li>
        搜索    
        </li>
     </ul>
        <router-view /> 
</div>
</template>


<script>
export default{
}
</script>

<style scoped>

.index img{
  width:50px;
  height:50px;
}

.index ul{
    display:flex;
    height:50px;
    line-height:50px;
    background:#f9f9f9;
}
  
.index li{
    flex:1;
    text-align:center;
    list-style-type: none;
}

.index ul li a{
    font-size:16px;
    color:#999;
}
</style>

```

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在尝试在一个基于Vue CLI的项目中组织路由和组件结构时遇到了一些问题。根据你提供的信息，我发现了几个可能的问题点。让我们一步步解决它们。

首先，对于import Home from 'src/components/pages/home'这行代码，它应该指向的是home.vue文件所在的路径。但是你写的路径是相对路径，而你应该使用绝对路径。所以你需要将这一行更改为：

import Home from '@/components/pages/home.vue'

其次，在src/router中的children部分，你有一个小错误。组件应该是对象的一部分，而不是直接赋值给components。修复后的代码应为：

{
  path: '/home',
  component: Home
}

现在，让我们修复这些错误并重新整理一下代码。这里是修正后的src/router/index.js文件：

import Vue from 'vue';
import Router from 'vue-router';
import Index from '@/components/pages/index.vue';
import Home from '@/components/pages/home.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index,
      children: [
        {
          path: '/home',
          component: Home
        }
      ]
    }
  ]
});

接着是src/components/pages/home.vue，这部分看起来没有问题。

最后是src/components/pages/index.vue，这里也有一个小错误，你忘记关闭<template>标签。这是修正后的代码：

<template lang="html">
  <div class="index">
    <ul>
      <li>
        <img src="@/assets/logo2.jpg" alt="" />
      </li>
      <li>歌手</li>
      <li>榜单</li>
      <li>我的</li>
      <li>搜索</li>
    </ul>
    <router-view />
  </div>
</template>

<script>
export default {
};
</script>

<style scoped>
.index img {
  width: 50px;
  height: 50px;
}

.index ul {
  display: flex;
  height: 50px;
  line-height: 50px;
  background: #f9f9f9;
}

.index li {
  flex: 1;
  text-align: center;
  list-style-type: none;
}

.index ul li a {
  font-size: 16px;
  color: #999;
}
</style>

现在，保存并重新运行项目。按照这些修改，你应该可以成功地从Index组件中通过路由访问到Home组件了。如果还有任何问题，请随时告诉我。