小弟我最近寫Node.js用來測試自己寫的HTML
一直讀取不到我在HTML內部連結的CSS檔案
但是當我關掉Node.js單開HTML又能讀取到CSS了
目前小弟駑鈍，求各位大大幫忙@@
https://stackoverflow.com/questions/50441000/include-css-and-js-files-in-node-js
而且我也遵循上面的步驟也是失敗
資料夾:
HTML程式碼(gram.html):
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="public/gram.css" type="text/css">
<title>Training</title>
</head>
<body>
<form action="server.js" class="Login">
<h1>Login登陸</h1>
<input type="text" name="username" placeholder="帳號">
<input type="password" name="password" placeholder="密碼">
<input type="submit" value="登入">
</form>
</body>
</html>
Node.js程式碼(server.js):
const http = require('http');
const fs = require('fs');
const port = 3000;
const express = require('express');
const app = express();
app.use(express.static('public'));
const server = http.createServer(function(req, res) {
res.writeHead('200', { 'Content-Type': 'text/html' } )
fs.readFile('gram.html', function(error, data) {
if (error) {
res.writeHead(404);
res.writeHead("ERROR");
} else {
res.write(data);
}
res.end();
});
});
server.listen(port, function(error) {
if (error) {
console.log("something wrong", error);
} else {
console.log(`server Runing on http://127.0.0.1:${port}`);
}
});
已邀請的邦友 {{ invite_list.length }}/5
你的問題出在這行
app.use(express.static('public'));
這個意思是當 client 來一個請求時，找找看這個資料夾下有沒有這個檔案，如果有就直接傳回去給 client ，而這樣寫的話，底下的檔案都變成可以在網頁的「根目錄」拿到，也就是你的 css 的網址其實變成了 /gram.css ，你有兩種改法
app.use('/public', express.static('public'))
這樣會讓你的 /public 下的請求才去找 public 資料夾下的檔案，網址就會正確了
iThome鐵人賽
看影片追技術