常用配置src路径别名@（含ts项目、craco）

2021-09-04 2,292 阅读1分钟

前言

本文章用于解决一些常见配置路径问题，如配置了alias，配置了tsconfig.json还是无效

1.常规项目配置

** 找到webpack配置文件里的resolve**

    resolve: {
    ...,
        alias: {
          '@': path.resolve(__dirname, './src');
        }
    }

2.ts项目

** 根目录tsconfig.json**

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

由于部分手脚架项目会重置修改tsconfig文件，那么请用第三步extends方法

3. extends方法

    {
        ...,
        "extends": "./tsconfig.extend.json",
    }

2> 根目录新建tsconfig.extend.json

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

4.craco启动项目

根目录craco.config.js

const CracoAntDesignPlugin = require('craco-antd');

const path = require("path");
const resolve = dir => path.resolve(__dirname, dir);
module.exports = {
  plugins: [
    {
      plugin: CracoAntDesignPlugin,
      options: {
        source: "tsconfig",
　　　　　baseUrl: "./src",
　　　　　tsConfigPath: "./tsconfig.extend.json",
        customizeTheme: {
          '@primary-color': '#5b5bea'
        },
      },
    },
  ],
  webpack: {
    alias: {
      '@': resolve("src")
    }
  }
};

5.实际运用

    import PageLoading from '@/components/base/pagesLoading'