刷新後無法獲得正確的靜態文件，除了索引頁面

當我在索引路由（/）和登錄頁面（/login）上刷新頁面時，它工作正常。刷新後無法獲得正確的靜態文件，除了索引頁面

但是，我的網站在我刷新其他路線時出錯，例如/user/123456。

因爲不管請求是什麼，瀏覽器總是獲取HTML文件。
因此，main.css和main.js中的內容都是HTML和瀏覽器錯誤。

enter image description here

我已經讀創建反應的應用程序內的自述。
無論我使用serve包（$serve -s build -p 80）還是快遞，都會產生奇怪的bug。

以下是我的服務器代碼：

//server.js 
const express = require('express'); 
const path = require('path'); 
app.use(express.static(path.join(__dirname, 'build'))); 
app.get('/*', (req, res) => { 
    res.sendFile(path.join(__dirname, 'build', 'index.html')); 
}); 
const PORT = process.env.PORT || 80; 
app.listen(PORT,() => { 
    console.log(`Production Express server running at localhost:${PORT}`); 
});

編輯：我想通了其中引發的問題。
我創建了一個新項目，並將其與我的項目進行了比較。新項目中的靜態文件的路徑爲絕對，但在我的項目中是相對。
因此，我在package.json中刪除"homepage": "."。

//package.json 
{ .... 
    dependencies:{....}, 
    ...., 
- "homepage": "." 
}

現在一切都按預期工作。我怎麼不小心......

來源

2017-05-14 SHZhao74

這將是有益的，看到你的webpack配置和index.html –

@ promisified謝謝你的迴應。我使用create-react-app來開發和構建。我應該拒絕嗎？ – SHZhao74

您是否試圖提供構建腳本創建的靜態文件？如果沒有，我不確定爲什麼你需要快遞服務文件，因爲創建反應應用程序在開發中使用webpack dev服務器？ –

我已經找出引起問題的原因。我創建了一個新項目，並將其與我的相比較。新項目中的靜態文件的路徑爲絕對，但在我的項目中是相對。因此，我在package.json中刪除"homepage": "."。

//package.json 
{ .... 
dependencies:{....}, 
...., 
- "homepage": "." 
}

現在一切正常。我怎麼會不小心...

來源

2017-05-17 08:48:45 SHZhao74

如果你的路線/user/**被app.get('/*', ...後定義它可能不匹配，因爲/*得到所有的請求和index.html返回你。嘗試沒有*或之前申報其他路線。

來源

2017-05-14 15:59:11

感謝您的回覆。 'react-route'是客戶端路由。你的意思是我仍然需要手動處理服務器路由嗎？ – SHZhao74

不，我認爲如果你在任何請求中獲得main.html文件，可能是因爲'app.get（'/ *''捕獲了所有的請求，所以也許'app.use（express.static（path .join（__ dirname，'build'）））;'沒有正確設置，我在文件樹中沒有看到任何「build」文件夾，可能就是這個原因 –

首先，我以爲你誤解了服務器部分。在你的情況下，你使用serve作爲你的服務器。這是[serve]提供的靜態服務器。如果您想使用自己的server.js，則應運行node server.js或node server。

我也對你做了同樣的事情，沒有這個問題。以下是我所做的：

create-react-app my-app
npm run build
sudo serve -s build -p 80（sudo爲1024的端口）

而且我得到的結果：

/user/321

一世猜到你可能會忘記編寫腳本。你可以嘗試如下：

刪除build/文件夾
運行npm run build再次

提醒：如果你想專注於前端，你可以使用[服務]。你很容易專注於你所需要的東西。

來源

2017-05-16 20:23:54 kkshyu

我發現我的問題是由主頁設置引起的在_package.json_。感謝您的迴應。 – SHZhao74

刷新後無法獲得正確的靜態文件，除了索引頁面

回答

相關問題