您可以使用5个简单步骤解决此问题，而无需弹出：

第1步：将react-app-rewired添加到您的devDependencies中。

yarn add -D react-app-rewired或npm intall react-app-rewired --save-dev

第2步：安装后，您可以将package.json默认ReactsJS脚本更改为：

"scripts": {  
  "start": "react-app-rewired start",  
  "build": "react-app-rewired build",  
  "test": "react-app-rewired test",  
  "eject": "react-app-rewired eject" 
}

第3步：在根路径上创建一个名为tsconfig.paths.json的新文件，其内容如下：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "services/*": ["./src/shared/services/*"],
      "interfaces/*": ["./src/shared/interfaces/*"]
    }
  }
}

提示1：您可以选择要使用的路径，例如：@services, @interface, @src, ~, @, etc，只需更改"paths": {}中的键即可

这同样适用于它的值：["src/shared/services/*"], ["src/shared/interfaces/*"], ["src/*"]，请在此处使用相对路径。

第4步：在"compilerOptions"之前，您需要扩展刚刚创建的tsconfig.paths.json。

就像这样：

{
  "extends": "./tsconfig.paths.json",
  ...//rest of file infos compilerOptions, include... whatever
}

第5步：创建一个新文件config-overrides.js，在其中添加别名和相对路径：

const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: {
      ...config.resolve.alias,
      'services': path.resolve(__dirname, 'src/shared/services'),
      'interfaces': path.resolve(__dirname, 'src/shared/interfaces')
    },
  };

  return config;
};

提示2：如果您使用的是**eslint**，请记住要有一个.eslintignore文件，并在其中添加config-overrides.js。

重新启动IDE或文本编辑器，在我的例子中是VSCode。

**完成！**现在只需运行yarn start或npm run start

是否需要使用@语法？
您是否能够使用以下语法：

import x from 'components/shell/shell'

？
如果是，请参阅CRA Absolute Imports的文档。
对于Typescript，您的tsconfig.json变为：

{
  "compilerOptions": {
    // ... usual options ...
    "baseUrl": "src",
  },
  // ... include, etc...
}

开箱即用，这将允许您导入src作为基目录。
因此，您的语法变为：

import x from 'components/shell/shell';

这将是摩擦力最小的选择...
可是......
如果你绝对需要@语法，那么要让rewire正确工作就需要多一点小技巧。我发现的唯一让rewire使用该语法的方法是包括一个webpack别名重写。
因此，流程如下（请根据应用程序的需要更新路径）：
1.在您的tsconfig.json旁边创建一个tsconfig.paths.json，其中包含：

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

1.使用extend更新您的tsconfig.json：

{
  "compilerOptions": {
    // ... standard options ...
  },
  "include": [
    "src"
  ],
  "extends": "./tsconfig.paths.json"
}

运行build命令（npm run build）时，脚本将抛出以下错误：

The following changes are being made to your tsconfig.json file:
  - compilerOptions.paths must not be set (aliased imports are not supported)

extend选项可以缓解这种情况。
1.将Web包别名添加到config-overrides.js：

const path = require('path');
const { override, addWebpackAlias } = require('customize-cra');

module.exports = override(
  addWebpackAlias({
    '@components': path.resolve(__dirname, 'src/components'),
  })
);

这个例子使用了包customize-cra，它有一堆有用的解析器用于覆盖。（如果你不想使用它，那么你需要在传递给override函数的config对象上设置config.resolve.alias属性）
现在，假设您已经将所有脚本更新为使用react-app-rewired，您应该能够使用以下语法：

import x from '@components/shell/shell';

不再支持路径别名

但是，现在您可以执行此操作，直接导入与src目录相关的文件
转到tsconfig.json文件，将baseUrl添加为"."

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

那么你可以直接从src目录导入东西

import Myfile from "src/myfile.js"

"这对我有用"