javascript - vue.js module解析不正确

问题描述

问 题

报错信息是：
ERROR in ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue
Module not found: Error: Can't resolve './components/BookExpress' in 'F:Devbookstore-demosrc'
@ ./~/babel-loader/lib!./~/vue-loader/lib/selector.js?type=script&index=0!./src/App.vue 7:19-54
@ ./src/App.vue
@ ./src/main.js
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

实在看不出错误，求诸位帮忙

App.vue

<template>
  <div id="app">
    <div class="content-warper">
      <lasted-books></lasted-books>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BookExpress from './components/BookExpress'
  export default {
    name: 'app',
    components: {
      BookExpress
    },
    data () {
      return {
      }
    }
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
  }

  html {
    overflow-x: hidden;
    background: #EEEEEE;
  }

  body {
    display: flex;
    overflow-x: hidden;
  }

  #app {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue", STHeiti, "Microsoft Yahei", Tahoma, Simsun, sans-serif;
    width: 100%;
    height: 100%;
  }

  #app a {
    color: #42b983;
    text-decoration: none;
  }
</style>

components/BookExpress.vue

<template>
  <div class="lasted-books">
    <div class="content">
      <div class="lasted-list">
        <div class="list-title">
          <p class="title-text">最新上架</p>
        </div>
        <div class="list-content">
          <div class="list-item" v-for="item in bookList">
            <div class="list-img">
              <img v-lazy="item.imgUrl">
            </div>
            <div class="list-info">
              <p class="book-name">{{ item.bookName }}</p>
              <p class="book-author">{{ item.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import { mapGetters } from 'vuex'
  export default {
    computed: {
      ...mapGetters({
        bookList: 'books'
      })
    }
  }
</script>

<style scoped lang="less" rel="stylesheet/less">
  .lasted-books {
    margin-top: 50px;
    .loading {
      color: #999;
      width: 100%;
      height: 150px;
      line-height: 150px;
      text-align: center;
    }
    .content {
      .lasted-list {
        display: flex;
        flex-direction: column;
        background: #fff;
        margin-top: 10px;
        box-shadow: 0 0 10px #DDD;
        .list-title {
          height: 50px;
          text-align: center;
          line-height: 50px;
        }
        .list-content {
          display: flex;
          fex-direction: row;
          flex-wrap: wrap;
          .list-item {
            width: 50%;
            cursor: pointer;
            .list-img {
              position: relative;
              img {
                width: 100%;
              }
            }
          }
        }
        .list-info {
          padding: 0 5px;
          font-weight: 300;
          font-size: 14px;
          margin-bottom: 10px;
          .book-name {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
          }
          .book-author {
            color: #777777
          }
        }
      }
    }
  }
</style>

package.json

{
  "name": "first-vue",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "myesis <[e-mail]>",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
    "lint": "eslint --ext .js,.vue src"
  },
  "dependencies": {
    "vue": "^2.3.3",
    "vue-router": "^2.1.1",
    "vuex": "^2.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-helpers": "^6.24.1",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-object-rest-spread": "^6.23.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-env": "^1.5.1",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "cross-env": "^3.0.0",
    "css-loader": "^0.25.0",
    "eslint-friendly-formatter": "^2.0.5",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "less": "^2.7.1",
    "less-loader": "^2.2.3",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "shelljs": "^0.7.4",
    "vue-loader": "^12.1.0",
    "vue-template-compiler": "^2.3.3",
    "webpack": "^2.6.1",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-dev-server": "^2.4.5",
    "webpack-hot-middleware": "^2.12.2"
  }
}

解决方案

是不是你组件路径写错了

这篇关于javascript - vue.js module解析不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！