爲什麼不能在瀏覽器上運行React production build？

我正在嘗試使用react的構建工具構建我的反應應用程序。當我嘗試「npm開始」時，該應用程序工作正常。爲什麼不能在瀏覽器上運行React production build？

npm start

對http://localhost:3000 =>我可以訪問該應用程序。

但是，當我構建應用程序，並嘗試訪問build文件夾「的index.html」的文件，它不工作，我有一個白色的空白屏幕遇到的問題。

npm run build

http://myreact-app/build/index.html =>白色的空白屏幕。

這是在運行npm run build之後創建的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和腳本文件。當我看着你的文件結構時，我看到有關構建的一切都在build文件夾下。但在你的html文件中，在文件路徑之前有斜線（「/」）。這就是爲什麼瀏覽器正在尋找這些「構建」下的文件。嘗試刪除斜槓。在你的package.json，

：「主頁」 -

<!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

上述問題可如果添加需要克服「」。這不是官方的，但是可以遵循。

來源

2017-12-12 12:59:04

鏈接某些參考文獻時，您可以發佈一些有用的內容，如文章最重要的部分，以便您的答案可能更有價值... – DaFois

爲什麼不能在瀏覽器上運行React production build？

回答

相關問題