前言

在使用 Vue 3 開發項目時，遇到“找不到模塊 ‘@/components/xxx.vue’ 或其相應的類型聲明”的錯誤是一個常見問題。這通常與 TypeScript 和模塊解析相關的配置不當有關。本文將詳細介紹如何解決此問題，確保你的項目能夠正確識別和導入 Vue 組件。

背景

在 Vue 項目中，@ 符號通常用作別名，指向項目的根目錄（一般是 src 目錄）。這使得模塊導入路徑更簡潔和直觀。然而，當使用 TypeScript 時，除了配置 Webpack 或 Vite 以支持別名外，還需要在 TypeScript 配置文件中同步更新別名設置，否則 TypeScript 編譯器無法解析這些路徑，導致無法找到模塊或其相應的類型聲明。

問題描述

先上問題截圖。
出現這個問題如何解決。這個項目是通過Vite創建的Vue3項目。編輯器使用的是VS Code。

不僅僅代碼顯示報錯，并且編譯也報錯。

解決方案

1、安裝依賴（主要用于解決 Node.js 環境相關的類型定義問題）

npm i @types/node -D

2、在 vite.config.ts 文件中配置別名：

在defineConfig配置項里面增加下面配置：

   resolve:{alias:{"@":path.resolve(__dirname,'./src')}}

完整的配置如下：

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

添加后效果如下：

3、在 tsconfig.json 文件中配置路徑映射：
在compilerOptions里面增加以下配置

    "baseUrl": ".","paths": {"@/*": ["./src/*"] }

效果圖如下：

4、重啟編輯器VS Code
重啟后找不到模塊這個問題就解決了。完成以上配置后，你可以使用 @ 別名來導入 Vue 組件，而不會遇到模塊解析錯誤。

總結

通過正確配置 Webpack/Vite 和 TypeScript，確保 @ 別名在項目中正確解析，你可以避免“找不到模塊 ‘@/components/xxx.vue’ 或其相應的類型聲明”的錯誤。以上步驟提供了詳細的解決方案，幫助你順利開發 Vue 3 應用。