当前位置: 首页 > article >正文

配置@别名路径,把@/ 解析为 src/

路径解析配置 webpack

安装 craco

        npm i -D @craco/craco

项目根目录下创建文件 craco.config.js ,内容如下

const path = require('path')
module.exports = {
    webpack: {
        // 配置别名
        alias: {
            // 约定: 使用@ 表示src文件所在路径
            '@': path.resolve(__dirname,'src')
        }
    }
}

包文件中配置启动命令和打包命令

经过以上配置,可以用@/home 替换 ./home , 但输入 @/ 时没有给出路径下 文件名提示

创建 jsconfig.json 文件, 内容如下:

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

路径解析配置 Vite

修改Vite配置

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

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})

提示:找不到模块‘path’,需安装 

npm i @types/node -D

还需配置 jsconfig. json
{
  "compilerOptions": {
    "jsx": "react",
    "baseUrl": "./",
    "paths": {
        "@/*": [
            "src/*"
        ]
    }
  },

}


http://www.kler.cn/a/533242.html

相关文章:

  • 毕业设计:基于深度学习的高压线周边障碍物自动识别与监测系统
  • 多线程的创建方式一:继承Thread类
  • C语言第六课:数组与字符串
  • Redis常见命令
  • 【线程】基于环形队列的生产者消费者模型
  • 连续预测、
  • 响应式编程_03响应式编程在Netflix Hystrix 、Spring Cloud Gateway、Spring WebFlux中的应用
  • java进阶文章链接
  • Page Assist - 本地Deepseek模型 Web UI 的安装和使用
  • SpringBoot开发(四)SpringBoot配置文件
  • 【数据可视化-14】Boss招聘数据分析岗位的可视化分析
  • C++11详解(二) -- 引用折叠和完美转发
  • 使用C++构建一个优先级队列
  • 代理模式的作用
  • 从 DeepSeek R1 中提取数学推理数据,使用 CAMEL
  • 华为手机nova9,鸿蒙系统版本4.2.0.159,智慧助手.今天版本是14.x,如何卸载智慧助手.今天?
  • Python进行模型优化与调参
  • SGlang 专为大模型设计的高效服务框架
  • DRGDIP 2.0时代下基于PostgreSQL的成本管理实践与探索(上)
  • AI透明化与全球政治格局的发展:如何避免AI被人为操控
  • 电商用户画像数据可视化分析
  • 基于MODIS/Landsat/Sentinel/国产卫星遥感数据与DSSAT作物模型同化的作物产量估算
  • 使用 Redisson 实现分布式并发限流
  • Spring 面试题【每日20道】【其三】
  • 力扣73矩阵置零
  • 【Leetcode 每日一题】541. 反转字符串 II