Vuejs 编译失败，出现 1 个错误找不到相关模块

Question

在创建 PostService.js 并进行 api 调用后尝试编译。我收到此错误：

ERROR  Failed to compile with 1 errors                                                       12:54:44 AM
This relative module was not found:

* ../components/PostFrom.vue in ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/views/Home.vue?vue&type=script&lang=js&

这是我在 package.json 中的开发依赖项列表：

"devDependencies": {
    "@vue/cli-plugin-babel": "^4.4.6",
    "@vue/cli-plugin-eslint": "^4.4.6",
    "@vue/cli-service": "^4.4.6",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.5.0",
    "eslint-plugin-vue": "^6.2.2",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11"
  },

我的相关结构如下：

src
    assets
    components
      Navbar.vue
      PostForm.vue
    views
      About.vue
      Home.vue
    App.vue
    main.js
    PostService.js
    router.js

App.vue

<template>
  <div>
    <Navbar></Navbar>
    <div class="container">
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
import Navbar from "./components/Navbar";
import "../node_modules/materialize-css/dist/css/materialize.min.css";
import "../node_modules/materialize-css/dist/js/materialize.min.js";

export default {
  name: "App",
  components: {
    Navbar,
  },
};
</script>

<style></style>

Home.vue

<template>
  <div>
    <div class="row">
      <div class="col s6">
        <!-- form -->
        <PostForm />
      </div>
    </div>
    <div>
      <div class="row">
        <div
          class="col s6"
          v-for="(post, index) in posts"
          v-bind:item="post"
          :index="index"
          :key="post.id"
        >
          <div class="card">
            <div class="card-content">
              <p class="card-title">{{ post.title }}</p>
              <p class="timestamp">{{ post.createdAt }}</p>
              <p>{{ post.body }}</p>
            </div>
            <div class="card-action">
              <a href="#">Edit</a>
              <a href="#" class="delete-btn">Delete</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import PostService from "../PostService";
import PostForm from "../components/PostFrom.vue";
const postService = new PostService();

export default {
  name: "Home",
  components: {
    PostForm,
  },
  data() {
    return {
      posts: [],
    };
  },
  created() {
    postService
      .getAllPosts()
      .then((res) => {
        this.posts = res.data;
        console.log(this.posts);
      })
      .catch((err) => console.error(err));
  },
};
</script>

<style scoped>
.card .card-content .card-title {
  margin-bottom: 0;
}

.card .card-content p.timestamp {
  color: #999;
  margin-bottom: 10px;
}

.delete-btn {
  color: red !important;
}
</style>

PostForm.vue

<template>
  <div>
    <form v-if="!loading" class="form" v-on:submit="onSubmit">
      <div class="input-field">
        <label for="title">Title</label>
        <input type="text" name="title" v-model="title" class="validate" />
        <span class="helper-text" data-error="Title must not be empty"></span>
      </div>
      <div class="input-field">
        <label for="body">Body</label>
        <input type="text" name="body" v-model="body" class="validate" />
        <span class="helper-text" data-error="Body must not be empty"></span>
      </div>
      <button type="submit" class="waves-effect waves-light btn">Add</button>
    </form>
  </div>
</template>

<script>
export default {
  name: "PostForm",
  data() {
    return {
      loading: false,
      title: "",
      body: "",
    };
  },
};
</script>

PostService.js

import axios from 'axios';

const apiBaseUrl = 'https://ndb99xkpdk.execute-api.eu-west-2.amazonaws.com/dev';

export default class PostService {
    getAllPosts() {
        return axios.get(`${apiBaseUrl}/posts`);
    }
}

main.js

import Vue from 'vue'
import App from './App.vue'

import router from './router';

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

我已尝试删除 node_modules 文件夹并重新安装。我还尝试删除 node_modules/.cache/babel-loader 和 node_modules/.cache/vue-loader 的内容。我还在 npm 中运行更新 - 升级等。到目前为止，我没有尝试过。我是运行 Vue版本4.1.2和node版本12.14.0 对此的任何帮助将不胜感激。先感谢您。干杯。

Answer 1

您的代码中存在拼写错误。组件的文件名是 PostForm.vue 但在 Home.vue 中您正尝试从 PostFrom.vue.

导入组件

使用正确的文件名，错误就会消失。

Answer 2

这个错误通常发生在我重命名组件而忘记更改文件名时

Vuejs 编译失败，出现 1 个错误找不到相关模块

Vuejs Failed to compile with 1 errors Relative module not found

javascript

vue.js

vue-cli

Vuejs 编译失败，出现 1 个错误 找不到相关模块

Vuejs Failed to compile with 1 errors Relative module not found

javascript

vue.js

vue-cli

Vuejs 编译失败，出现 1 个错误找不到相关模块