在我的例子中，我使用craco和craco-alias解决了这个问题
1.安装craco和craco-alias：npm install @craco/craco --save && npm i -D craco-alias
1.在根目录中创建tsconfig.paths.json

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

1.在tsconfig.json中扩展tsconfig.paths.json

{
    "extends": "./tsconfig.paths.json",
    //default configs...
}

1.在根目录中创建craco.config.js

const CracoAlias = require("craco-alias");

  module.exports = {
     plugins: [
       {
          plugin: CracoAlias,
          options: {
             source: "tsconfig",
             // baseUrl SHOULD be specified
             // plugin does not take it from tsconfig
             baseUrl: "./src",
             /* tsConfigPath should point to the file where "baseUrl" and "paths" 
             are specified*/
             tsConfigPath: "./tsconfig.paths.json"
          }
       }
    ]
  };

1.在package.json中，将"start": "react-scripts start"与"start": "craco start"交换

craco或重新连接 create-react-app 的别名解决方案是**react-app-alias**，适用于以下系统：第一个
根据所述系统的文档，替换package.json中的react-scripts，然后配置：

React应用程序重新连线

// config-overrides.js
const {aliasWebpack, aliasJest} = require('react-app-alias')

const options = {} // default is empty for most cases

module.exports = aliasWebpack(options)
module.exports.jest = aliasJest(options)

饼干

// craco.config.js
const {CracoAliasPlugin} = require('react-app-alias')

module.exports = {
  plugins: [
    {
      plugin: CracoAliasPlugin,
      options: {}
    }
  ]
}

全部

在json中配置别名，如下所示：

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

并将此文件添加到主typescript配置文件的extends部分：

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

编辑- 20/3/20 -上述答案包含一个带有插件的解决方案。

有同样的问题。在发布时，它目前不支持原样。
CRA团队仍在开发该功能：https://github.com/facebook/create-react-app/pull/6116
如果您编辑tsconfig，CRA会移除变更：https://github.com/facebook/create-react-app/issues/6269
这篇文章中有一些技巧：https://github.com/facebook/create-react-app/issues/5118以使别名工作，但是需要定制CRA设置，这不适合我的用例（按原样使用CRA）。

路径别名在tsconfig.json中不再有效

您也可以这样做，直接导入与src目录相关的文件

转到tsconfig.json文件，将基本URL添加为"."

"compilerOptions": {
    "baseUrl":".",
    ...

然后你可以直接从src目录导入东西

import Myfile from "src/myfile.js"

这是一个老帖子，但我发现了一个非常简单的解决方案，只使用package.json特性。

"dependencies": {
  "@yourAlias": "file:./path/to/your/folder"
}

它可以在node.js和webpack项目中使用

@oklas。我已经解决了使用config-overrides.js中的以下内容，这与上面的内容相同。但是非常感谢分享这个答案：

const { alias, configPaths } = require("react-app-rewire-alias");

module.exports = function override(config) {
  alias({
    ...configPaths("base-tsconfig.json"),
  })(config);
  return config;
};

在2022中，对于那些使用弹出的TypeScript create-react-app的用户，您可以通过config/webpack.config.js中的webpack设置别名，如下所示：

// ... the other keys of webpack config;
    resolve: {
        alias: {
            // ... here set your aliases among ones the CRA sets itself
            // NB: __dirname will refer to ./config so you have to put '../src' to move up from ./config folder and set @src tp ./src, not ./config/src;
            '@src': path.join(__dirname, '../src')
            // Here set your other aliases if needed.
        }
    }

然后在ts/tsx文件中使用别名，如下所示：

import logo from '@src/assets/logo.svg';

下面是webpack resolve docs的基本知识。
请注意，CRA设置的唯一别名是src，因此您可以使用import logo from 'src/assets/logo.svg';，而无需更改webpack配置。如果别名在未弹出的应用程序中工作，您必须自行检查。

我们还使用craco和ts-loader解决了该问题-如下所述：https://stackoverflow.com/a/63545611/10813908
所述设置基本上允许CRA通过craco覆盖内置webpack配置进行扩展，还允许CRA代码直接引用mono-repo中外部/共享包中的typescript文件。