【发布时间】：2021-04-01 12:08:18
【问题描述】：
有人问了类似的问题，我又问了在阅读了许多问题 (including this most upvoted) 之后，尝试并没有得到任何积极的结果，并且敲了我大约两个小时的头。请调查一下。我正在学习一些网络开发。我正在尝试构建这个bootstrap signup page。但是我被困在非常早期的阶段。附上代码文件：（在Gofile.io上传的zip文件，链接在最后）
我在 chrome 控制台上遇到错误：
Refused to apply style from 'http://localhost:3000/assets/styles/bootstrap.min.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:1 Refused to apply style from 'http://localhost:3000/assets/styles/signup.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
localhost/:39 GET http://localhost:3000/assets/images/bootstrap-solid.svg 404 (Not Found)
在打开任何指向新标签的链接时，我得到了（bootsrap-image 的示例）：
Cannot GET /assets/images/bootstrap-solid.svg
我在 Windows 10 操作系统上使用 Google Chrome 最新版本。
除了 package.json 和 app.js 之外，我已经复制了所有 html 和 css 引导示例源代码。
directory structure--
Newsletter-signup
|_assets
| |_images
| | |_bootstrap-solid.svg
| | |_favicon.ico
| |
| |_styles
| |_bootstrap.min.css
| |_signup.css
|
|_app.js
|_package.json
|_signup.html
package.json:
{
"name": "Newsletter-Signup",
"version": "1.0.0",
"description": "",
"main": "app.js",
"type": "module",
"scripts": {
"start": "nodemon app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"express": "^4.17.1",
"nodemon": "^2.0.7"
}
}
app.js：
import express from "express";
import https from "https";
import path from "path";
const app = express();
const __dirname = path.resolve();
const portNumber = 3000;
// console.log(__dirname);
app.use(express.static(path.join(__dirname, "assets")));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.get("/", (req, res) => {
res.sendFile(path.join(__dirname, "signup.html"));
});
app.post("/", () => {
console.log("called app.post method");
});
app.listen(portNumber, () => {
console.log("server listening at portNumber: " + portNumber);
});
signup.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="icon" href="assets/images/favicon.ico" />
<title>Signup Form</title>
<!-- <link
rel="canonical"
href="https://getbootstrap.com/docs/4.0/examples/sign-in/"
/> -->
<!-- Bootstrap core CSS -->
<link
type="text/css"
rel="stylesheet"
href="assets/styles/bootstrap.min.css"
/>
<!-- Custom styles for this template -->
<link type="text/css" rel="stylesheet" href="assets/styles/signup.css" />
</head>
<body class="text-center">
<form class="form-signin">
<img
class="mb-4"
src="assets/images/bootstrap-solid.svg"
alt=""
width="72"
height="72"
/>
<h1 class="h3 mb-3 font-weight-normal">Please sign in</h1>
<label for="inputEmail" class="sr-only">Email address</label>
<input
type="email"
id="inputEmail"
class="form-control"
placeholder="Email address"
required
autofocus
/>
<label for="inputPassword" class="sr-only">Password</label>
<input
type="password"
id="inputPassword"
class="form-control"
placeholder="Password"
required
/>
<div class="checkbox mb-3">
<label>
<input type="checkbox" value="remember-me" /> Remember me
</label>
</div>
<button class="btn btn-lg btn-primary btn-block" type="submit">
Sign in
</button>
<p class="mt-5 mb-3 text-muted">© 2017-2018</p>
</form>
</body>
</html>
signup.css
body {
height: 100%;
}
body {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-signin {
width: 100%;
max-width: 330px;
padding: 15px;
margin: 0 auto;
}
.form-signin .checkbox {
font-weight: 400;
}
.form-signin .form-control {
position: relative;
box-sizing: border-box;
height: auto;
padding: 10px;
font-size: 16px;
}
.form-signin .form-control:focus {
z-index: 2;
}
.form-signin input[type="email"] {
margin-bottom: -1px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.form-signin input[type="password"] {
margin-bottom: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
如果我使用 CDN 进行引导，则引导部分可以工作。 另外，如果没有节点，如果我只是在浏览器中粘贴 signup.html 的路径，它工作正常。
您可以从here下载并查看完整的源文件
【问题讨论】：
-
您在浏览器开发工具的“网络”选项卡中看到了什么？
标签： javascript html css node.js express