プロダクションビルドをブラウザで実行できないのはなぜですか？

私はreactのビルドツールを使用して私のリアクションアプリをビルドしようとしています。私が "npm start"しようとすると、アプリは正常に動作します。プロダクションビルドをブラウザで実行できないのはなぜですか？

npm start

オンhttp://localhost:3000 =>私はアプリケーションにアクセスできます。

しかし、私は、アプリケーションをビルドし、ビルドフォルダの「index.htmlの」ファイルにアクセスしようとすると、それは動作しませんし、私は白い空白の画面で発生します。

npm run build

http://myreact-app/build/index.html =>白い空白の画面です。

これは、npm run buildの実行後に作成されたビルドフォルダです。

そして、これは私が何か間違ったことを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" 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.46d8cd76.js"></script></body></html>

やっているのですか？私のApache Webサーバー上に構築されたindex.htmlファイルにアクセスできませんか？

出典

2017-06-05 amone

インデックスを表示します。すべてのスクリプトが正しく挿入されていますか？あなたのコンソールにエラーがありますか？ – Sulthan

@Sulthanを追加しました。私もそれを理解しようとしていますが、それは "npm run build"の出力です。コンソールにエラーはありません – amone

'main.js'にはあなたのコードだけが含まれていますか、それともすべての依存関係も含まれていますか？それはチェックするのが簡単なはずです。 – Sulthan

あなたはまだ気づいていないかもしれませんが、あなたのhtmlファイルがcssとスクリプトファイルを正しくインポートできるとは思わないでしょう。あなたのファイル構造を見ると、ビルドに関するすべてがビルドフォルダの下にあることがわかります。しかし、あなたの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><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>

出典

2017-06-05 14:30:37 aravvn

はい、私は気づいていなかったとは信じられませんでした。 – amone

ブラウザのネットワークコンソールは、最初に確認する必要があります。おそらくファイルの読み込みエラーがあります。 – Sulthan

なぜスラッシュが追加されましたか、それを避けるための適切な方法はありますか？ – Firdous

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

あなたが追加した場合、上記の問題を克服することができます - "ホームページ"： ""、

あなたのpackage.jsonインチこれは公式なことではありません。

出典

2017-12-12 12:59:04

いくつかのリファレンスをリンクすると、ポストの最も重要な部分のような便利なものを投稿できるので、あなたの答えはもっと貴重なものになります... – DaFois

プロダクションビルドをブラウザで実行できないのはなぜですか？

答えて

関連する問題