我制作的 vue 前端编译失败，出现一个错误，提示“未找到此相关模块模块”
Posted
技术标签:
【中文标题】我制作的 vue 前端编译失败，出现一个错误，提示“未找到此相关模块模块”【英文标题】：The vue frontend I made fails to compile with one error saying "this relative module module was not found" 【发布时间】：2021-10-17 18:10:03 【问题描述】：我制作了一个 vue 前端来与我的 spring 后端对话，它工作正常，但是在制作前端并编译它之后编译到 98% 并出现错误消息：
ERROR 编译失败，出现 1 个错误 11:24:51
未找到此相关模块：
../services/TutorialDataService 在 ./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/components/TutorialsList.vue?vue&type=script&lang=js&
我不知道出了什么问题，但我已经重做了整个项目三次，但它仍然返回相同的错误消息。有人能帮帮我吗？
这里是 main.js
import Vue from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import router from './router'
Vue.config.productionTip = false
new Vue(
router,
vuetify,
render: h => h(App)
).$mount('#app')
这里是 TutorialDataService.js
import http from "../http-common";
class TutorialDataService
getAll()
return http.get("/tutorials");
get(id)
return http.get(`/tutorials/$id`);
create(data)
return http.post("/tutorials", data);
update(id, data)
return http.put(`/tutorials/$id`, data);
delete(id)
return http.delete(`/tutorials/$id`);
deleteAll()
return http.delete(`/tutorials`);
findByTitle(title)
return http.get(`/tutorials?title=$title`);
export default new TutorialDataService();
这里是 AddTutorial.vue
<template>
<div class="submit-form mt-3 mx-auto">
<p class="headline">Add Tutorial</p>
<div v-if="!submitted">
<v-form ref="form" lazy-validation>
<v-text-field
v-model="tutorial.title"
:rules="[(v) => !!v || 'Title is required']"
label="Title"
required
></v-text-field>
<v-text-field
v-model="tutorial.description"
:rules="[(v) => !!v || 'Description is required']"
label="Description"
required
></v-text-field>
</v-form>
<v-btn color="primary" class="mt-3" @click="saveTutorial">Submit</v-btn>
</div>
<div v-else>
<v-card class="mx-auto">
<v-card-title>
Submitted successfully!
</v-card-title>
<v-card-subtitle>
Click the button to add new Tutorial.
</v-card-subtitle>
<v-card-actions>
<v-btn color="success" @click="newTutorial">Add</v-btn>
</v-card-actions>
</v-card>
</div>
</div>
</template>
<script>
import TutorialDataService from "../services/TutorialDataService";
export default
name: "add-tutorial",
data()
return
tutorial:
id: null,
title: "",
description: "",
published: false,
,
submitted: false,
;
,
methods:
saveTutorial()
var data =
title: this.tutorial.title,
description: this.tutorial.description,
;
TutorialDataService.create(data)
.then((response) =>
this.tutorial.id = response.data.id;
console.log(response.data);
this.submitted = true;
)
.catch((e) =>
console.log(e);
);
,
newTutorial()
this.submitted = false;
this.tutorial = ;
,
,
;
</script>
<style>
.submit-form
max-width: 300px;
</style>
这里是 Tutorial.vue
<template>
<div v-if="currentTutorial" class="edit-form py-3">
<p class="headline">Edit Tutorial</p>
<v-form ref="form" lazy-validation>
<v-text-field
v-model="currentTutorial.title"
:rules="[(v) => !!v || 'Title is required']"
label="Title"
required
></v-text-field>
<v-text-field
v-model="currentTutorial.description"
:rules="[(v) => !!v || 'Description is required']"
label="Description"
required
></v-text-field>
<label><strong>Status:</strong></label>
currentTutorial.published ? "Published" : "Pending"
<v-divider class="my-5"></v-divider>
<v-btn v-if="currentTutorial.published"
@click="updatePublished(false)"
color="primary" small class="mr-2"
>
UnPublish
</v-btn>
<v-btn v-else
@click="updatePublished(true)"
color="primary" small class="mr-2"
>
Publish
</v-btn>
<v-btn color="error" small class="mr-2" @click="deleteTutorial">
Delete
</v-btn>
<v-btn color="success" small @click="updateTutorial">
Update
</v-btn>
</v-form>
<p class="mt-3"> message </p>
</div>
<div v-else>
<p>Please click on a Tutorial...</p>
</div>
</template>
<script>
import TutorialDataService from "../services/TutorialDataService";
export default
name: "tutorial",
data()
return
currentTutorial: null,
message: "",
;
,
methods:
getTutorial(id)
TutorialDataService.get(id)
.then((response) =>
this.currentTutorial = response.data;
console.log(response.data);
)
.catch((e) =>
console.log(e);
);
,
updatePublished(status)
var data =
id: this.currentTutorial.id,
title: this.currentTutorial.title,
description: this.currentTutorial.description,
published: status,
;
TutorialDataService.update(this.currentTutorial.id, data)
.then((response) =>
this.currentTutorial.published = status;
console.log(response.data);
)
.catch((e) =>
console.log(e);
);
,
updateTutorial()
TutorialDataService.update(this.currentTutorial.id, this.currentTutorial)
.then((response) =>
console.log(response.data);
this.message = "The tutorial was updated successfully!";
)
.catch((e) =>
console.log(e);
);
,
deleteTutorial()
TutorialDataService.delete(this.currentTutorial.id)
.then((response) =>
console.log(response.data);
this.$router.push( name: "tutorials" );
)
.catch((e) =>
console.log(e);
);
,
,
mounted()
this.message = "";
this.getTutorial(this.$route.params.id);
,
;
</script>
<style>
.edit-form
max-width: 300px;
margin: auto;
</style>
这里是 TutorialsList.vue
<template>
<v-row align="center" class="list px-3 mx-auto">
<v-col cols="12" md="8">
<v-text-field v-model="title" label="Search by Title"></v-text-field>
</v-col>
<v-col cols="12" md="4">
<v-btn small @click="searchTitle">
Search
</v-btn>
</v-col>
<v-col cols="12" sm="12">
<v-card class="mx-auto" tile>
<v-card-title>Tutorials</v-card-title>
<v-data-table
:headers="headers"
:items="tutorials"
disable-pagination
:hide-default-footer="true"
>
<template v-slot:[`item.actions`]=" item ">
<v-icon small class="mr-2" @click="editTutorial(item.id)">mdi-pencil</v-icon>
<v-icon small @click="deleteTutorial(item.id)">mdi-delete</v-icon>
</template>
</v-data-table>
<v-card-actions v-if="tutorials.length > 0">
<v-btn small color="error" @click="removeAllTutorials">
Remove All
</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</template>
<script>
import TutorialDataService from "../services/TutorialDataService";
export default
name: "tutorials-list",
data()
return
tutorials: [],
title: "",
headers: [
text: "Title", align: "start", sortable: false, value: "title" ,
text: "Description", value: "description", sortable: false ,
text: "Status", value: "status", sortable: false ,
text: "Actions", value: "actions", sortable: false ,
],
;
,
methods:
retrieveTutorials()
TutorialDataService.getAll()
.then((response) =>
this.tutorials = response.data.map(this.getDisplayTutorial);
console.log(response.data);
)
.catch((e) =>
console.log(e);
);
,
refreshList()
this.retrieveTutorials();
,
removeAllTutorials()
TutorialDataService.deleteAll()
.then((response) =>
console.log(response.data);
this.refreshList();
)
.catch((e) =>
console.log(e);
);
,
searchTitle()
TutorialDataService.findByTitle(this.title)
.then((response) =>
this.tutorials = response.data.map(this.getDisplayTutorial);
console.log(response.data);
)
.catch((e) =>
console.log(e);
);
,
editTutorial(id)
this.$router.push( name: "tutorial-details", params: id: id );
,
deleteTutorial(id)
TutorialDataService.delete(id)
.then(() =>
this.refreshList();
)
.catch((e) =>
console.log(e);
);
,
getDisplayTutorial(tutorial)
return
id: tutorial.id,
title: tutorial.title.length > 30 ? tutorial.title.substr(0, 30) + "..." : tutorial.title,
description: tutorial.description.length > 30 ? tutorial.description.substr(0, 30) + "..." : tutorial.description,
status: tutorial.published ? "Published" : "Pending",
;
,
,
mounted()
this.retrieveTutorials();
,
;
</script>
<style>
.list
max-width: 750px;
</style>
这里是 router.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
export default new Router(
mode: "history",
routes: [
path: "/",
alias: "/tutorials",
name: "tutorials",
component: () => import("./components/TutorialsList")
,
path: "/tutorials/:id",
name: "tutorial-details",
component: () => import("./components/Tutorial")
,
path: "/add",
name: "add",
component: () => import("./components/AddTutorial")
]
);
这里是 http-commons.js
import axios from "axios";
export default axios.create(
baseURL: "http://localhost:8081/api",
headers:
"Content-type": "application/json"
);
这是我在 package.json 中的依赖项
"name": "vuetify-table-example-2",
"version": "0.1.0",
"private": true,
"scripts":
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
,
"dependencies":
"axios": "^0.21.1",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.5.2",
"vuetify": "^2.4.0"
,
"devDependencies":
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.4.2",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
,
"eslintConfig":
"root": true,
"env":
"node": true
,
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions":
"parser": "babel-eslint"
,
"rules":
,
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
【问题讨论】：
【参考方案1】：在 addTutorial.vue 的标签中，尝试更改您的导入来源：
import TutorialDataService from "../services/TutorialDataService";
收件人：
import TutorialDataService from "../services/TutorialDataService.js";
在末尾添加 .js 文件扩展名
【讨论】：
【参考方案2】：教程的文件结构与导入的不同，请尝试将其用于组件下的 TutorialDataService 导入：
从“../../services/TutorialDataService”导入TutorialDataService；
您可能遇到的另一个错误是 services/TutorialDataService.js 下的 http-common.js 导入应该是：
从“../src/http-common”导入http；
【讨论】：
以上是关于我制作的 vue 前端编译失败，出现一个错误，提示“未找到此相关模块模块”的主要内容，如果未能解决你的问题，请参考以下文章