Express 設定靜態檔案的方式

一點也不好玩的路徑遊戲。

懶人包

最常見的用法就這兩個：

// 兩個的意思是一樣的，但 path 的用法要記得先引入模組
app.use(express.static(__dirname + '/public'));
app.use(express.static(path.join(__dirname, 'public')))

至於這到底是什麼意思？想知道的話就看下去。

用途解釋

簡單來說，express.static 是用來設定「靜態檔案的位置」：

express.static(root, [options])

當我設定 express.static(__dirname + '/public') 的意思是說，當網址是 /hello 時，就去 /hello/public 底下去找；如果是 /hello/abc，就到 /hello/abc/public，以此類推。

但要特別注意在引入 CSS 時要用絕對路徑，是 /css/style.css 不是 css/style.css，後面用的是「相對路徑」，這樣就會抓不到檔案，總之要分清楚這兩個的差別。（還是不太懂的話就參考 這篇）

不過會發現另一個問題，當想在瀏覽器讀取時，不是用 /public/css/style.css 來存取，而是用 /css/style.css 的方式。

如果希望指定一個路徑，要這樣設定：

app.use('/static', express.static(__dirname + '/public'));

這樣就可以用 /static/css/style.css 來存取。