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

一、配置@别名

vite.config.ts文件

typescript 复制代码

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文件

typescript 复制代码

{
  "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文件，添加上

typescript 复制代码

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

报错消除，成功打包。

以下附上修改文件位置