Блог

ПРАВКА: Решена проблема с некоторой помощью! Я просто переместил json в исходный код и импортировал его напрямую.

Я создаю статический веб-сайт портфолио с помощью react. Я разработал веб-сайт, запустив локальный сервер, npm start и я закончил с веб-сайтом и тем, как он выглядит. Веб — сайт работает путем извлечения текста из локального файла json для заполнения определенных текстовых полей. Поскольку веб-сайт выглядел хорошо npm start , я сделал npm build , чтобы создать веб-сайт для загрузки, и стиль и формат все есть, но весь текст из файла json не отображается. Я не знаю, что здесь делать. Я также не уверен, какую информацию следует предоставить, поэтому вот package.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();  }  

Вот содержимое моего пакета.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": [  "gt;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 │ │ └─── /* List of Fonts */ │ │ │ ├───images │ │ ├─── /* List of Images */ │ │ └─── /* Sublist of 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 /* WHERE MOST WEBSITE TEXT IS STORED */ │ │ │ ├───css │ │ │ default.css │ │ │ fonts.css │ │ │ layout.css │ │ │ magnific-popup.css │ │ │ media-queries.css │ │ │ │ │ ├───font-awesome │ │ ├───fontello │ │ └───fonts │ ├───images │ │ ├─── /* List of Images */ │ │ └───portfolio │ │ └─── /* Sublist of 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 └───src  │ App.css  │ App.js  │ App.test.js  │ index.css  │ index.js  │ registerServiceWorker.js  │  └───Components  └─── /* List of Components */