vite创建的react+ts项目 配置路径别名

1、安装依赖

npm i @types/node

2、vite.config.js中配置路径别名

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// 导入这个
import path from 'path'

export default defineConfig({
  plugins: [react()],
  // 添加路径配置!!!
  resolve: {
    alias: {
      // 使用 @ 替换src目录
      '@': path.resolve(__dirname, './src')
    }
  }
})

3、输入@自动提示路径

这三个文件都加上下面这个配置
在这里插入图片描述

{
  "compilerOptions":{
    "baseUrl": ".",
      "paths": {
          "@/*": [
              "src/*"
          ]
      },
  }
}

4、测试

可以看到main.ts中输入@/可以出来路径提示,导入后不会报红
在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值