node呈现的ejs文件可以离线使用吗bootstrap？

Question

我是节点和全栈开发的新手，希望我能正确地提出这个问题，而不是因为您的特定理解水平而粗心或冒犯。

我的开发环境已连接 Internet，生产环境不会，我想将 bootstrap.css 与节点一起使用。 Apache/httpd 不是生产中的选项。

在本地测试 bootstrap 具有挑战性，css 文件的正确目录被认为是正确的。

CENTOS 7 上的主目录是 myapp，包含 app0.js，带有 espress 和 body-parser 以及所有依赖项的 node_modules，以及包含 grid.ejs 的 views 目录。

我的应用程序/
    app0.js
    node_modules
    意见/
        grid.ejs
    public/
        bootstrap.css

这里是 grid.html（适用于 apache）：

<!DOCTYPE html>
<html>

<head>
  <title>Bootstrap Grid Test</title>
  <link rel="stylesheet" type="text/css" href="bootstrap.css">

  <style type="text/css">
    .pink {
      background: yellow;
      border: 3px solid red;
  </style>  
</head>

<body>
  <div class="row">
    <div class="col-lg-2 pink"><center>2 columns </center></div>
    <div class="col-lg-7 pink"><center>7 columns </center></div>
    <div class="col-lg-3 pink"><center>3 columns </center></div>
  </div>

</body>

</html>

这是 apache 为 grid.html 显示的内容：

https://imgur.com/VanVZJn "bootstrap with httpd"

然而app0.js没有！

所以 bootstrap.css 在 Internet 上引用时有效 (1) - 我无法在生产中使用它 (2) 在我的开发环境中通过 http 代码从 httpd 但不是来自 ejs 文件。

注意：我可以从节点访问 bootstrap，因为从启动节点的终端显示无法访问时会出现 404 错误。在尝试理解这一点至少 12 小时后，我被难住了。遗憾的是，解决方案的时间表很短，我求助于各位优秀的读者！

App0.js //设置

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser')

app.set('view engine','ejs');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())

app.get("/grid", function(req, res, next){
    res.render("grid")
});

app.listen(3000,function(){
    console.log("serving test demo on port 3000")
});

views/grid.ejs

<!DOCTYPE html>
<html>

<head>  
  <title>Bootstrap Grid System</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="public/bootstrap.css">
  <style type="text/css">
      .pink {
          background: yellow;
          border: 3px solid red;
       }  
  </style>
</head>

<body>
    <div class="row">
        <div class="col-lg-2 pink"><center>2</center></div>
        <div class="col-lg-7 pink"><center>7</center></div>
        <div class="col-lg-7 pink"><center>3</center></div>
    </div>

</body>

</html>

此处显示：

https://imgur.com/ZLOgZKT "bootstrap not working"

Answer 1

您必须在 app0.js 文件中定义要提供静态文件的 public 路径。尝试以下需要 path 模块并在 bodyParser.json() 之后使用 express.static 的 app0.js 文件：

var express = require('express'),
    app = express(),
    bodyParser = require('body-parser'),
    path = require('path')

app.set('view engine','ejs');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
app.use(express.static(path.join(__dirname, 'public')));

app.get("/grid", function(req, res, next){
    res.render("grid")
});

app.listen(3000,function(){
    console.log("serving test demo on port 3000")
});

你的 grid.ejs 文件 link bootstrap 文件是这样的：

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

node呈现的ejs文件可以离线使用吗bootstrap？

Can node presented ejs files use offline bootstrap?

offline

ejs

node.js

twitter-bootstrap