React项目npm start运行正常，npm build打包后JSON数据不显示如何解决？

编辑：已在协助下解决该问题！我仅将JSON文件移动到源码目录并直接导入即可。

问题描述 #

我正在使用React开发静态作品集网站，运行npm start启动本地服务器完成开发时，网站效果完全符合预期。该网站通过读取本地JSON文件中的文本填充指定文本字段。

由于npm start运行时网站展示完全正常，我执行npm build构建待上传的站点包，构建后页面样式和格式都正常，但JSON文件中的所有文本都没有展示。以下是我附上的相关代码、配置和项目结构：

数据请求代码 #

class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      foo: 'bar',
      resumeData: {}
    };

    ReactGA.initialize('UA-110570651-1');
    ReactGA.pageview(window.location.pathname);

  }

  getResumeData(){
    $.ajax({
      url:'/resumeData.json',
      dataType:'json',
      cache: false,
      success: function(data){
        this.setState({resumeData: data});
      }.bind(this),
      error: function(xhr, status, err){
        console.log(err);
        alert(err);
      }
    });
  }

  componentDidMount(){
    this.getResumeData();
  }

package.json配置 #

{
  "name": "portfolio_site",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "@testing-library/jest-dom": "^5.15.0",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "jquery": "^3.6.0",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-ga": "^3.3.0",
    "react-scripts": "4.0.3",
    "web-vitals": "^1.1.2"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

项目结构 #

portfoli_site
│   firebase.json
│   package-lock.json
│   package.json
│
├───.firebase
│
├───.git
├───build
│   │   404.html
│   │   asset-manifest.json
│   │   favicon.ico
│   │   index.html
│   │   manifest.json
│   │   resumeData.json
│   │
│   ├───css
│   │   │   default.css
│   │   │   fonts.css
│   │   │   layout.css
│   │   │   magnific-popup.css
│   │   │   media-queries.css
│   │   │
│   │   ├───font-awesome
│   │   ├───fontello
│   │   └───fonts
│   │       └─── /* 字体文件列表 */
│   │
│   ├───images
│   │   ├─── /* 图片文件列表 */
│   │   └─── /* 图片子目录 */
│   │
│   ├───js
│   │       init.js
│   │       jquery-1.10.2.min.js
│   │       jquery-migrate-1.2.1.min.js
│   │       jquery.fittext.js
│   │       jquery.flexslider.js
│   │       magnific-popup.js
│   │       modernizr.js
│   │       waypoints.js
│   │
│   └───static
│       ├───css
│       │       main.bab0b925.chunk.css
│       │       main.bab0b925.chunk.css.map
│       │
│       └───js
│               2.5db02833.chunk.js
│               2.5db02833.chunk.js.LICENSE.txt
│               2.5db02833.chunk.js.map
│               main.e8ddd9a1.chunk.js
│               main.e8ddd9a1.chunk.js.map
│               runtime-main.f90b5c1b.js
│               runtime-main.f90b5c1b.js.map
├───public
│   │   404.html
│   │   favicon.ico
│   │   index.html
│   │   manifest.json
│   │   resumeData.json /* 网站大部分文本存储在此处 */
│   │
│   ├───css
│   │   │   default.css
│   │   │   fonts.css
│   │   │   layout.css
│   │   │   magnific-popup.css
│   │   │   media-queries.css
│   │   │
│   │   ├───font-awesome
│   │   ├───fontello
│   │   └───fonts
│   ├───images
│   │   ├─── /* 图片文件列表 */
│   │   └───portfolio
│   │       └─── /* 图片子目录 */
│   └───js
│           init.js
│           jquery-1.10.2.min.js
│           jquery-migrate-1.2.1.min.js
│           jquery.fittext.js
│           jquery.flexslider.js
│           magnific-popup.js
│           modernizr.js
│           waypoints.js
└───src
│   App.css
│   App.js
│   App.test.js
│   index.css
│   index.js
│   registerServiceWorker.js
│
└───Components
        └─── /* 组件文件列表 */

内容的提问来源于stack exchange，提问作者Reddit Bot