Question

我刚刚开始使用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);
})

Answer 1

1）bootstrap和express彼此无关。 Bootstrap完全在客户端运行，express是node.js上的服务器中间件lib

2）你为什么要自己服务？更好地使用CDN：

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

3）如果您坚持自己提供服务，请添加一个静态目录，以便express可以提供静态文件（当您尝试为yoursite提供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"

Answer 2

您需要一个实际的静态中间件。默认情况下，Express本身不会执行任何操作。

app.use（express.static（__ dirname +“/ public”））;
请勿在HTML中的路径中使用“public”。这是静态资产所在的目录，但从浏览器的角度来看是根。并且不要使用相对路径，

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

Express不渲染引导程序

2 个答案: