gpt4 book ai didi

javascript - Express 不渲染 Bootstrap

转载 作者:搜寻专家 更新时间:2023-11-01 00:10:31 25 4
gpt4 key购买 nike

我刚开始使用 Express,我想弄清楚为什么当我运行我的应用程序时,Bootstrap 字体没有呈现(它以简单的 Times New Roman 显示文本)。我很确定我使用的是正确的路径,因为当我在浏览器中打开 index.html 时,字体会正确呈现。我还尝试使用 Bootstrap 导航栏进行此操作,当我尝试通过 Node 运行它时,Bootstrap 似乎无法正常工作,但当我在浏览器中独立查看 HTML 文件时,它又可以正常工作。将 Bootstrap 目录的路径更改为“/public/bootstrap...”会导致它无法正确呈现两种方式。我该如何解决这个问题?

index.html:

<html>
<head>
<title>X</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen">
</head>
<body>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="container">
<h1>Under Construction</h1>
<p>This website is under construction. Come back soon!</p>
</div>
</body>
</html>

web.js(我的主应用文件):

var express = require('express')

var app = express()
app.set('view engine', 'ejs')
app.engine('html', require('ejs').renderFile)

app.get('/', function(req, res) {
res.render('index.html')
})

var port = process.env.PORT || 5000;
app.listen(port, function() {
console.log("Listening on " + port);
})

最佳答案

1) bootstrap 和 express 没有任何关系。 Bootstrap完全运行在客户端,express是一个基于node.js的服务端中间件库

2) 你为什么要自己提供 bootstrap?最好使用 CDN:

  1. http://www.bootstrapcdn.com
  2. http://hostedbootstrap.com/

3) 如果您坚持自己提供服务,请添加一个静态目录,以便 express 可以提供静态文件(当您尝试为您的站点提供 js/css 但仍然更喜欢从 CDN 提供 Bootstrap 时,添加一个静态目录也会为您提供服务.

app.use(express.static(path.join(__dirname, 'public')));

然后不需要使用 public,只需使用你的 css 的根路径:

bootstrap/css/bootstrap.min.css

i.e.

<link href="../public/bootstrap/css/bootstrap.min.css" type="text/css" rel="stylesheet" media="screen"

关于javascript - Express 不渲染 Bootstrap ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16778626/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com