嗷嗚~

import('../views/Login.vue'), 提示找不到模塊或其相應的類型聲明；

技術棧：ts+vue3+vite

創建一個 vite-env.d.ts文件

/// <reference types="vite/client" />

declare module '*.vue' {
import type { DefineComponent } from 'vue'
const component: DefineComponent<{}, {}, any>
export default component
}

上面代碼用于在 TypeScript 項目中為 .vue 文件提供類型支持

在 TypeScript 中，三斜線指令是一種特殊的注釋，用于告訴編譯器在編譯時包含額外的類型定義文件。

/// <reference types="vite/client" /> 表明當前項目依賴于 vite/client 這個類型定義包。

• 這是一個 TypeScript 三斜線指令（triple-slash directive）
• 它告訴 TypeScript 編譯器引入 Vite 客戶端的類型聲明
• 這樣就能獲得 Vite 提供的內置類型支持，如導入靜態資源（圖片、CSS 等）時的類型提示

vite/client 是 Vite 框架提供的類型定義文件，它包含了 Vite 客戶端相關的類型信息，比如環境變量類型、導入模塊的類型等。通過引入這個類型定義，TypeScript 編譯器就能正確識別和處理與 Vite 客戶端相關的代碼。

declare module 是在 TypeScript 中聲明一個模塊的語法

declare module '*.vue'

• 這是 TypeScript 的模塊聲明語法，用于為沒有類型定義的模塊提供類型聲明
• 具體來說，它為所有 .vue 文件擴展名的模塊聲明了類型
• 在 TypeScript 中，默認不認識 .vue 文件，所以需要這個聲明

從 Vue 中導入 DefineComponent 類型

import type { DefineComponent } from 'vue'

• 從 Vue 中導入 DefineComponent 類型
• 使用 import type 表示只導入類型，不會在運行時引入實際代碼

聲明一個名為 component 的常量，類型為 DefineComponent

const component: DefineComponent<{}, {}, any>

• 聲明一個名為 component 的常量，類型為 DefineComponent
• DefineComponent 是 Vue 組件的類型，有三個泛型參數：
  -- 第一個 {} 表示組件的 props 類型為空對象
  -- 第二個 {} 表示組件的 emits 類型為空對象
  -- 第三個 any 表示組件的插槽內容類型為 any（任意類型）

將 component 作為默認導出

export default component

• 將 component 作為默認導出
• 這樣在導入 .vue 文件時，TypeScript 就知道默認導出的是一個 Vue 組件
  這段代碼的主要作用是讓 TypeScript 能夠正確識別和處理 .vue 文件的導入，為 Vue 單文件組件提供類型支持。當你在代碼中使用 import xxx from './xxx.vue' 時，TypeScript 編譯器就會根據這個聲明文件知道導入的是一個 Vue 組件，并提供相應的類型檢查