react + TS 配置@开头路径提示和别名

开发攻城狮

已于 2022-07-18 11:18:46 修改

阅读量1.8k

点赞数

文章标签： react.js 前端 javascript

于 2022-07-18 11:17:16 首次发布

本文链接：https://blog.csdn.net/weixin_46533797/article/details/125844409

版权

我们在写项目的时候，引入文件有路径别名和提示会非常的爽，如下图，那就需要给项目配置路径别名和提示了。
在这里插入图片描述

第一步

yarn add @craco/craco -D

第二步，在项目根目录下，创建两个文件

craco.config.js
path.tsconfig.json

第三步打开刚创建的 craco.config.js

//对webpack配置别名
const path = require('path')

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

第四步修改 package.json 在这里插入图片描述
第五步打开path.tsconfig.js 加入一下代码

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