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

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

• • 一、配置@别名
  • 二、输入@/能索引文件
  • 三、解决找不到模块“@/pages/home”或其相应的类型声明

一、配置@别名

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/*\" ] }, }

报错消除，成功打包。

以下附上修改文件位置