Vue组件导入postService报错：找不到相对模块求助

问题描述 #

我是Vue.js新手（仅接触2天），参考MEVN架构文章编写了一个Vue组件，代码如下：

<template> 
<div class="post"> 
<h1>post</h1> 
<div > 
<!-- <p v-for="post in posts"> 
<span><b>{{post.title}}</b></span> 
<span><b>{{post.description}}</b></span> 
</p> --> 
</div> 
</div> 
</template> 
<script> 
import postService from "@/services/postservice"
// 剩余代码省略
</script>

现在遇到错误提示：找不到相对模块，请求帮助解决该问题。

解决方案 #

别慌！刚接触Vue两天碰到这个问题太正常了，这个错误核心就是项目找不到你要导入的postservice文件，咱们一步步排查解决：

• 核对路径与文件名的细节
  Vue的模块导入对路径、文件名的大小写是严格敏感的（尤其是在Linux/macOS系统下）。你写的导入路径是@/services/postservice，先确认：

  1. 项目里确实存在src/services这个文件夹（@在Vue项目中默认指向根目录下的src文件夹）
  2. 文件夹内的文件名是不是postservice.js（服务类文件一般是.js或.ts后缀），注意有没有拼写错误，比如是不是写成了PostService、postService这类大小写不一致的名称

• 尝试添加完整文件扩展名
  部分项目如果没有配置自动识别文件扩展名，可能需要在导入时写完整的文件名，比如：

  import postService from "@/services/postservice.js"
  

• 确认项目文件夹结构
  确保你的项目结构符合预期，比如：

  项目根目录/
  ├── src/
  │   ├── services/
  │   │   └── postservice.js
  │   └── components/
  │       └── 你的组件文件.vue
  

  如果services文件夹不在src目录下，那@的路径就不适用了，得改成相对路径。比如services和你的组件文件同级，就写成：

  import postService from "./services/postservice"
  

• 检查路径别名配置（可选）
  如果你自定义过@的指向，需要确认vue.config.js里的别名配置是否正确指向src目录，示例配置如下：

  const path = require('path');
  module.exports = {
    configureWebpack: {
      resolve: {
        alias: {
          '@': path.resolve(__dirname, 'src')
        }
      }
    }
  }
  

  要是没有这个配置，Vue默认是支持@指向src的，但部分旧版本或自定义项目可能需要手动配置。

内容的提问来源于stack exchange，提问作者Ashutosh Mane