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

最新推荐文章于 2024-08-17 22:42:26 发布

强壮的糙汉子

最新推荐文章于 2024-08-17 22:42:26 发布

阅读量352

点赞数

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_60622481/article/details/127240139

版权

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

摘要由CSDN通过智能技术生成

配置两个目录

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,
    "forceConsistentCasin