有一些答案提供了react-app-rewired的解决方案，但customize-cra包括一个removeModuleScopePlugin() API，它更优雅一些。(这是相同的解决方案，但被customize-cra包抽象了。)

NPM I——save-dev react-app-rewired customize-cra

package.json

"scripts": {
    - "start": "react-scripts start"
    + "start": "react-app-rewired start",
    ...
},

config-overrides.js

const { removeModuleScopePlugin } = require('customize-cra')

module.exports = removeModuleScopePlugin()

把@Flaom写的评论放在这里，标记为回复答案，这实际上挽救了生命:

“这怎么是公认的答案呢?通过简单地设置NODE_PATH=./src/..在。env文件中。通过这样做，你可以从src文件夹外导入，而不用经历弹出应用程序的痛苦。”

Flaom

编辑添加了一些更多的信息@cigien请求。

上面所有的答案都很好地描述了为什么当我们用create-react-app创建react应用程序时，我们不能使用公共文件夹中的图像。我自己也有这个问题，读了所有这些答案，我意识到，答案说的是“黑”应用程序，以删除限制我们的模块。有些答案甚至没有撤销选项。对于“培训”应用程序来说，这是可以的。

就我个人而言，我不希望在我自己的项目中添加改变应用概念的解决方案，特别是在商业项目中。@Flaom解决方案是最简单的，如果将来有任何变化，它可以被另一个解决方案取代。它没有任何风险，可以随时移除，是最简单的。

如果您只需要导入单个文件，如README。Md或package。json，那么它可以显式地添加到ModuleScopePlugin()

配置/ paths.js

const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
  appPackageJson: resolveApp('package.json'),
  appReadmeMD:    resolveApp('README.md'),
};

Config /webpack.config.dev.js + Config /webpack.config.prod.js

module.exports = {
  resolve: {
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc, [
          paths.appPackageJson,
          paths.appReadmeMD         // README.md lives outside of ./src/ so needs to be explicitly included in ModuleScopePlugin()
      ]),
    ]
  }
}

如果你需要多次修改，比如使用蚂蚁设计，你可以像这样组合多个功能:

const {
  override,
  removeModuleScopePlugin,
  fixBabelImports,
} = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
  }),
  removeModuleScopePlugin(),
);

如果你想从公共目录访问CSS文件，你可能会遇到OUTSIDE OF SOURCE DIRECTORY错误

或者，您可以在index.html中链接此文件，该文件也位于公共目录中。

<link rel="stylesheet" href="App.css">

为别人的答案提供更多的信息。关于如何将.png文件交付给用户，您有两个选项。文件结构应该与您选择的方法一致。这两个选项是:

使用react-create-app提供的模块系统(import x from y)，并将其捆绑到你的JS中。将图像放在src文件夹中。 从公用文件夹提供该文件，并让Node提供该文件。Create-react-app显然还附带了一个环境变量，例如<img src={process.env。PUBLIC_URL + '/img/logo.png'} />;。这意味着你可以在你的React应用中引用它，但仍然可以通过Node提供服务，你的浏览器会在一个正常的GET请求中单独请求它。

来源:create-react-app