vite搭建react-ts項目，@別名配置
- 一、配置@別名
- 二、輸入@/能索引文件
- 三、解決找不到模塊“@/pages/home”或其相應的類型聲明
一、配置@別名
- vite.config.ts文件
import { defineConfig, loadEnv, type ConfigEnv, type UserConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";export default ({ mode }: ConfigEnv): UserConfig => {return defineConfig({plugins: [react()],resolve: {//關鍵代碼alias: {"@": path.resolve(__dirname, "./src"), // 配置別名指向 src 目錄},},});
};- tsconfig.json文件
{"files": [],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }],"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}}
}以上配置完成之后，頁面即可使用路徑@/pages/home來引入文件
二、輸入@/能索引文件
- 安裝@types/node
yarn add @types/node
npm i @types/node -D - 效果圖
三、解決找不到模塊“@/pages/home”或其相應的類型聲明
以上配置完成之后基本可以直接使用@別名進行引入，項目運行也沒有問題。以下報錯也不行影響項目運行。
但是，操作過程中發現：找不到模塊“@/pages/home”或其相應的類型聲明報錯雖然不隨影響運行，但是打包時候會報錯。
解決辦法：
找到tsconfig.app.json文件，添加上
"compilerOptions":{// ...其他配置/* 配置別名 */"baseUrl": "./","paths": {"@/*":["src/*"]},}報錯消除，成功打包。
以下附上修改文件位置
