我是 node / express 的新手，我正在通過構建一個簡單的小費計算器應用程式對其進行測驗，但我無法加載我的 CSS。我在控制臺中不斷收到錯誤訊息：
"Refused to apply style from 'http://localhost:1000/public/style.css' because its MIME type ('text/html')."
我嘗試按照其他答案中的建議將靜態檔案的路徑更改為“公共”檔案夾，但它仍然不起作用。
我認為我的服務器可能配置不正確，因為當我嘗試http://localhost:1000/public/style.css在瀏覽器中加載時，出現CANNOT GET錯誤。我有點難過，因為我很確定路徑是正確的。知道我在這里做錯了什么嗎？
我的.js檔案：
const express = require('express');
const app = express();
const port = 1000
app.get('/', (req, res) => {
res.sendFile(__dirname '/index.html');
});
app.use(express.static('public'));
app.listen(port, () => {
console.log(`tipCalc listening on port ${port}`);
});
我的html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="public/style.css">
</head>
<body>
<div class="calculator container-fluid">
<form class="form">
<div class="form-group">
<label for="formGroupExampleInput">Bill</label>
<input type="text" class="form-control bill" id="formGroupExampleInput" placeholder="$0.00">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Tip %</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="0%">
</div>
<div class="form-group">
<label for="formGroupExampleInput2">Number of people</label>
<input type="text" class="form-control" id="formGroupExampleInput2" placeholder="">
</div>
</form>
<div class="row result">
<div class="col-xs-6 tip-result">
<h2>Tip amount: <span class="badge badge-secondary">$0</span></h2>
</div>
<div class="col-xs-6 total-result">
<h2>Total: <span class="badge badge-secondary">$0</span></h2>
</div>
</div>
</div>
<!-- bootstrap js/jquery -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
<script src="index.js" async defer></script>
</body>
</html>
我的檔案路徑：
uj5u.com熱心網友回復：
而不是使用你的
app.get('/')
聽眾，使用
app.use(express.static('public'))
注意：您需要將 html 檔案移動到公用檔案夾，我選擇提供公用檔案夾的原因是因為暴露代碼所在的主目錄是危險的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/421145.html
標籤：
下一篇：如何模糊或隱藏跑步者縮略圖？