Недавно я развернул свое приложение на github-страницах с помощью gatsby deploy. На настольном компьютере все работает так, как задумано, на локальном хосте - как на моем мобильном, так и на рабочем столе
Ссылка на приложение: https://daria -marczak.github.io / renome /
Я проверил, работает ли только мой телефон, но, к сожалению, нет. Кажется, все работает нормально через localhost, поэтому я подозреваю, что что-то не так с самим развертыванием. Он использует другую команду, так как он строит, а не развивает, но я не уверен, может ли это вызвать проблему.
Мой пакет.json:
"name": "renome",
"private": true,
"description": "renome restaurant",
"version": "0.1.0",
"author": "Daria Marczak",
"dependencies": {
"gatsby": "^2.4.2",
"gatsby-image": "^2.0.41",
"gatsby-plugin-manifest": "^2.1.1",
"gatsby-plugin-offline": "^2.1.0",
"gatsby-plugin-react-helmet": "^3.0.12",
"gatsby-plugin-sharp": "^2.0.36",
"gatsby-plugin-styled-components": "^3.1.0",
"gatsby-source-filesystem": "^2.1.0",
"gatsby-transformer-remark": "^2.5.0",
"gatsby-transformer-sharp": "^2.1.19",
"moment": "^2.24.0",
"object-fit-images": "^3.2.4",
"prop-types": "^15.7.2",
"react": "^16.8.6",
"react-dates": "^20.2.4",
"react-dom": "^16.8.6",
"react-helmet": "^5.2.1",
"react-redux": "^7.1.0",
"redux": "^4.0.1",
"redux-saga": "^1.0.4",
"styled-components": "^4.2.0"
},
"devDependencies": {
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^4.2.0",
"eslint-config-react-app": "^4.0.0",
"gatsby-plugin-eslint": "^2.0.5",
"gatsby-plugin-stylelint": "^3.2.0",
"gh-pages": "^2.0.1",
"husky": "^2.2.0",
"lint-staged": "^8.1.6",
"prettier": "^1.17.0",
"stylelint": "^10.0.1",
"stylelint-config-recommended": "^2.2.0",
"stylelint-config-styled-components": "^0.1.1",
"stylelint-processor-styled-components": "^1.6.0",
"stylelint-webpack-plugin": "^0.10.5"
},
"keywords": [
"gatsby"
],
"license": "MIT",
"scripts": {
"build": "gatsby build",
"develop": "gatsby develop",
"deploy": "gatsby build --prefix-paths && gh-pages -d public",
"format": "prettier --write src/**/*.{js,jsx}",
"start": "npm run develop",
"serve": "gatsby serve",
"dev-m": "gatsby develop -H 0.0.0.0 -p 8000",
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\""
},
"homepage": "https://daria-marczak.github.io/renome/"
}
Мой gatsby.config.js:
module.exports = {
siteMetadata: {
title: 'Renome',
description:
'Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.',
author: '@dariamarczak',
},
pathPrefix: '/renome',
plugins: [
'gatsby-plugin-react-helmet',
'gatsby-plugin-styled-components',
{
resolve: 'gatsby-source-filesystem',
options: {
path: `${__dirname}/src/assets`,
},
},
{
resolve: 'gatsby-source-filesystem',
options: {
name: 'posts',
path: `${__dirname}/src/posts`,
},
},
'gatsby-transformer-sharp',
'gatsby-plugin-sharp',
{
resolve: 'gatsby-plugin-manifest',
options: {
name: 'gatsby-starter-default',
short_name: 'starter',
start_url: '/',
background_color: '#663399',
theme_color: '#663399',
display: 'minimal-ui',
icon: 'src/assets/icons/gatsby-icon.png',
},
},
{
resolve: 'gatsby-plugin-eslint',
options: {
test: /\.js$/,
exclude: /(node_modules|cache|public)/,
options: {
emitWarning: true,
failOnError: false,
},
},
},
{
resolve: `gatsby-transformer-remark`,
options: {
commonmark: true,
footnotes: true,
pedantic: true,
gfm: true,
},
},
],
};
Теперь, если я перейду к мобильной версии развернутого проекта, он практически не работает. Изображения, которые были загружены с помощью gatsby-img, имеют размытые линии (не знаю, как описать этот эффект загрузки), но они никогда не загружаются полностью. Каждая отдельная функция, которая использовала хук useState (), не работает вообще, и все кнопки, для которых не установлены значения по умолчанию, фактически обновляют браузер.