要求JS和CSS給index.html代替

我使用Express和create-react-app。要求JS和CSS給index.html代替

我的React應用程序是一種方式，現在我試圖從Express服務器提供服務。

// server/app.js 

const express = require('express'); 
const path = require('path'); 

const app = express(); 

// Serve static assets 

app.use(express.static(path.resolve(__dirname, '..', 'build'))); 

// serve main file 

app.get('*', (req, res) => { 
    res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html')); 
}); 


module.exports = app;

（當我這樣做npm run build我的build目錄填充。

我Chrome瀏覽的頁面，以及什麼在localhost:3000加載頁面時出現的情況是控制檯打印Uncaught SyntaxError: Unexpected Token <，並在源標籤中，表明我的CSS和JS文件的內容是簡單的一樣index.html：如在此圖像中

這似乎是AR可識別的問題，所以希望以前有人看到過這個問題。我甚至都不知道該從哪裏開始，特別是因爲我實際上是在第一時間成功從Express開始提供應用程序。然後，這開始發生，然後它停止了一些隨機切換git分支並恢復和重播更改，然後它又開始發生。所以我甚至不知道是什麼讓它發生或不發生。

來源

2017-03-24 tscizzle

嘗試其從express documentation - serving static files in express詳述下面的代碼的變化：

替換

app.use(express.static(path.resolve(__dirname, '..', 'build')));

隨着

app.use(express.static('build'))

刪除

app.get('*', (req, res) => { 
    res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html')); 
});

來源

2017-03-24 23:12:34

嗯，現在它給了我一個404。沒有路徑匹配我猜。 – tscizzle

用新的代碼片段更新了答案，看看是否有幫助。 –

看起來您的app.use(express.static...調用失敗，因此所有請求（包括靜態資產）都由app.get('*', (req, res) => {部分處理。

正如你打算用它來服務一個React應用程序，我建議從樣板中獲取靈感，「看看它是如何完成的」。我個人使用NYTimes的kyt項目，也有反應 - 入門套件。

來源

2017-03-24 23:19:48 rorymorris89

問題是"homepage": ... in package.json。

當npm run build運行和存在的package.json主頁URL，有一個非空路徑（如Github的頁面URL這樣，https://username.github.io/project_name，其中「/ PROJECT_NAME」是路徑），它改變它期望/build以內的文件即可。對我的js和css的要求是/project_name/static/...而不是/static/...。

它甚至在npm run build日誌輸出說：

The project was built assuming it is hosted at /project_name/. 
You can control this with the homepage field in your package.json.

在我的本地，它不是在/project_name/託管，所以路徑是關閉。

來源

2017-03-25 00:19:02 tscizzle

在編寫快速應用程序的情況下，您可以將靜態網站安裝到任意目錄，例如'app.use（'/ project_name'，express.static（...））'。 – Thai

要求JS和CSS給index.html代替

回答

相關問題