vite搭建react-ts项目，@别名配置

一、配置@别名

1. 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 目录},},});
};

2. tsconfig.json文件

{"files": [],"references": [{ "path": "./tsconfig.app.json" },{ "path": "./tsconfig.node.json" }],"compilerOptions": {"baseUrl": "./","paths": {"@/*": ["src/*"]}}
}

以上配置完成之后，页面即可使用路径@/pages/home来引入文件

二、输入@/能索引文件

1. 安装@types/node
   yarn add @types/node
npm i @types/node -D
2. 效果图
   

三、解决找不到模块“@/pages/home”或其相应的类型声明

以上配置完成之后基本可以直接使用@别名进行引入，项目运行也没有问题。以下报错也不行影响项目运行。

但是，操作过程中发现：找不到模块“@/pages/home”或其相应的类型声明报错虽然不随影响运行，但是打包时候会报错。

解决办法：
找到tsconfig.app.json文件，添加上

 "compilerOptions":{// ...其他配置/* 配置别名 */"baseUrl": "./","paths": {"@/*":["src/*"]},}

报错消除，成功打包。

以下附上修改文件位置