Pourquoi ne Réagissent pas de la production de construire exécuté sur le navigateur?

Je suis en train de construire mon réagir application à l'aide de réagir de l'outil de construction. Lorsque j'essaie de "npm démarrer", l'application fonctionne très bien.

npm start

Sur http://localhost:3000 => je peux accéder à l'application.

Pourquoi ne Réagissent pas de la production de construire exécuté sur le navigateur?

Mais quand je créer l'application et essayez d'accéder à "index.html" fichier sur le dossier de création, il ne fonctionne pas et je rencontre avec un vide blanc de l'écran.

npm run build

http://myreact-app/build/index.html => Blanc écran vide.

C'est le dossier de la version qui a été créé après l'exécution de mnp exécuter construire.

Pourquoi ne Réagissent pas de la production de construire exécuté sur le navigateur?

Et c'est le index.html

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><link href="/static/css/main.9a0fe4f1.css" pln">stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.46d8cd76.js"></script></body></html>

Je fais quelque chose de mal? Ne puis-je pas accéder à la construit index.html fichier sur mon serveur web apache?

Nous montrer l'index. Sont tous les scripts correctement inséré? Toute erreur dans la console?
J'ai ajouté. Je suis aussi en train d'essayer de comprendre, mais c'est la sortie de "npm run build". Pas d'erreur dans la console
Ne main.js contiennent uniquement votre code ou faut-il comprend également toutes les dépendances? Qui doit être facile à vérifier.

OriginalL'auteur amone | 2017-06-05

  1. 12

    Probablement vous ne l'avez pas encore remarqué, mais je ne pense pas que votre fichier html est capable d'importer les css et les fichiers de script correctement. Quand je regarde la structure de votre fichier, je vois le tout sur build est dans le cadre du dossier. Mais dans votre fichier html, il y a des barres obliques ("/") avant de les chemins de fichier. C'est pourquoi le navigateur est à la recherche de ces fichiers dans le parent de "construire". Essayez de supprimer les barres obliques.

    <!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><link rel="shortcut icon" href="/favicon.ico"><title>React App</title><style></style><link href="static/css/main.65027555.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="static/js/main.316f1156.js"></script></body></html>
    Oui, je ne pouvais pas croire que la façon dont je n'ai pas d'avis.
    Le réseau de la console dans le navigateur devrait être l'un des premiers endroits à vérifier de toute façon. Le chargement d'un fichier d'erreur est sans doute de là.
    pourquoi les barres obliques ajouté, tout bon moyen de les éviter?
    Je vous remercie pour sauver ma journée Maintenant, je peux aller à la maison 😀
    Cela permet d'économiser mon temps beaucoup!!!, Merci

    OriginalL'auteur aravvn

  2. 4

    https://github.com/facebookincubator/create-react-app/issues/1487

    Le problème ci-dessus peut être surmonté si vous ajoutez -
    "page d'accueil":".",

    dans votre forfait.json.
    Ce n'est pas officiel, mais un bon hack à suivre.

    Lors de la liaison de certains de référence, vous pouvez poster quelque chose d'utile comme la partie la plus importante de la poste, de sorte que votre réponse peut être plus de valeur...
    Ci-dessous est la source pour le commentaire ci-dessus. Peut-être que cela aidera quelqu'un d'autre. github.com/facebook/create-react-app/blob/master/packages/...
    sera l'esprit la prochaine fois.

    OriginalL'auteur Manas Gond

  3. 1

    vous devez essayer d'utiliser le service package ici pour exécuter single page app.

    • npm install -g serve à installer à l'échelle mondiale
    • serve help de voir des textes d'aide
    • serve --single build pour servir de single page app. J'serveur sera lancé à partir de laquelle vous pouvez accéder à vos réagir application

    OriginalL'auteur Isaac Sekamatte

  4. 0

    Vous devez installer le serveur local plugin/extenstion.

    Si vous êtes vscode de l'utilisateur, alors la recherche du serveur en direct de l'extension et de l'installer. Ensuite, il y aura des "Go live" option en bas de votre éditeur.

    Pour les autres utilisateur de l'éditeur (atome/sublime) recherche pour live plug-ins de serveur.

    OriginalL'auteur Bimal Grg