配置vite下react+ts的alias别名@/

最新推荐文章于 2025-02-08 18:02:28 发布

原创最新推荐文章于 2025-02-08 18:02:28 发布 · 501 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #前端

react 专栏收录该内容

8 篇文章

订阅专栏

本文档介绍了如何在Vite环境下为React+TS项目配置alias别名'@/'，通过修改vite.config.ts和tsconfig.json两个关键文件，实现便捷的模块导入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

配置两个目录

1、vite.config.ts

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import {resolve} from 'path' //++
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],

  resolve: {//++
    alias: {//++
      '@': resolve(__dirname, './src'),//++
      '*': resolve('')//++
    },//++
  }//++
  
})

2、tsconfig.json

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ESNext"
    ],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": false,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "ESNext",
    "moduleResolution": "Node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",//+
    "paths": {//+
      "@/*": [//+
        "src/*"//+
      ]//+
    }
  },
  "include": [
    "src"
  ],
  "references": [
    {
      "path": "./tsconfig.node.json"
    }
  ]
}

随后就可以使用了