首页React学习

# React 配置别名路径

# Webpack 配置

路径解析配置

需要借助插件 craco

npm i -D @craco/craco

// craco.config.js
const path = require('path')
module.exports = {
  webpack:{
    alias:{
      '@': path.resolve(__dirname, 'src')
    }
  }
}
// package.json
"scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
联想路径配置（输入 @的时候有提示）


// jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    }
  }
}
# Vite 配置


路径解析配置


// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
})
安装 node 类型包


npm i @types/node -D
联想路径配置（输入 @的时候有提示）


// tsconfig.app.json
{
  "baseUrl": ".",
  "paths": {
    "@/*": [
      "src/*"
    ]
  },
}