Vue组件导入@/services/AuthenticationService报错：模块未找到求助

Hey there, let's walk through the most common fixes for that module not found error you're hitting. First, let's recap your error for clarity:

Module not found: Error: Can't resolve '@/services/AuthenticationService' To install it, you can run: npm install --save @/services/AuthenticationService

And here's your register.vue code for reference:

<template>
<div>
<h1>Register</h1>
<input type="email" name="email" v-model ="email" placeholder="email">
<br>
<input type="password" name="password" v-model ="password" placeholder="password">
<br>
<button @click="register"> Register </button>
</div>
</template>
<script>
import AuthenticationService from '@/services/AuthenticationService'
export default {
data () {
return {
email: '',
password: ''
}
},
methods: {
async register(){
const response = await AuthenticationService.register({
email: this.email,
password: this.password
})
console.log(response.data)
}
}
}
</script>
<style scoped></style>

Now let's go through the fixes one by one:

• Double-check your file path and naming
  First, make sure the file actually exists at src/services/AuthenticationService.js (or .ts if you're using TypeScript). Pay close attention to case sensitivity—if you're on macOS or Linux, AuthenticationService.js is different from authenticationService.js. Also, confirm you didn't accidentally save it in a subfolder or misspell the directory name (like service instead of services).

• Verify the @ alias is properly configured
  The @ alias is supposed to point to your project's src/ folder, but sometimes configurations get messed up:

  • For Vite projects: Open your vite.config.js and ensure you have this alias setup:

    import { defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import path from 'path'
    
    export default defineConfig({
      plugins: [vue()],
      resolve: {
        alias: {
          '@': path.resolve(__dirname, './src')
        }
      }
    })
    

  • For Vue CLI projects: Check vue.config.js (create it if it doesn't exist) and add:

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

  After updating the config, restart your dev server to apply changes.

• Ensure your service file exports correctly
  Open src/services/AuthenticationService.js and confirm it uses a default export (since that's what your component is importing):

  // Example correct default export
  import axios from 'axios'
  
  export default {
    async register(userData) {
      return await axios.post('/api/register', userData)
    }
  }
  

  If you're using a named export instead, your import would need to change to import { AuthenticationService } from '@/services/AuthenticationService' (note the curly braces).

• Clear cache and restart your dev server
  Sometimes cached build files can cause false "not found" errors. Stop your dev server, delete any cache folders (like .vite for Vite or node_modules/.cache for Vue CLI), then run npm run dev or npm run serve again.

Give these steps a try—usually one of them will fix the issue!

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