React: 创建路径别名

Vite是一种新型的前端构建工具，能够显著提升前端开发经验，大家可以浏览官方网站进一步学习。

 用Vite创建react项目命令：npm create vite@latest my-react-app --template react-s

这篇主要记录一下用Vite创建的React项目，如何配置路径别名@。路径别名的好处就是做路径简化， 经过配置的@相当于src目录。 

配置前：

import Detail from '../pages/Detail'

 配置后：

import Detail from '@/pages/Detail'

大家可以试想一下， 如果项目结构比较复杂，当想import一个指定组件的时候， 路径别名的好处是不是就不言而喻了。

Step1：修改vite配置

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'

export default defineConfig({
  plugins: [react()],
  // 配置路径别名
  resolve: {
    alias: {
      "@": path.resolve(__dirname, "./src")
    }
  }
})

Step2: 安装node类型包

npm i @types/node -D

Step3: 修改tsconfig.json文件

{
  "compilerOptions": {
    ...

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

效果图: