在 Nodejs 中加载静态资源

Question

加载静态文件的正确方法是什么。我正在尝试使用语义 UI。我遵循了这里的基本步骤：http://semantic-ui.com/introduction/getting-started.html。我安装了 Node，安装了 NPM，运行 gulp 进程并构建了文件。我还需要这样的文件：

link(rel='stylesheet', type='text/css', href='/semantic/dist/semantic.min.css')
script(src='semantic/dist/semantic.min.js')

我的项目结构是这样的：

server.js

views/  
  index.jade

semantic/  
  dist/
    semantic.min.css
    semantic.min.js

我已经在浏览器中检查过，没有控制台错误，但这些文件没有作为资源列出。我检查了服务器日志，没有错误。

我唯一能想到的是，我需要设置一个 public 目录来提供静态文件，例如：

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

编辑我试图这样做：

app.use(express.static('public'));

并已将文件移动到 public 目录中。它加载是因为我可以在浏览器中导航到它们，但它们没有被应用。

是否需要从语义文件夹中获取它们？我喜欢它们是由相同的 space.

构建和需要的

编辑

查看：

<!DOCTYPE html>  
<html lang="en">
  <head>
    <title>Title
      <script src="js/jquery.min.js"></script>
      <link rel="stylesheet" href="css/semantic.min.css">
      <script src="js/semantic.min.js"></script>
    </title>
    <body>
      <button class="ui button"> Follow</button>
    </body>
  </head>
</html>

服务器：

var express    = require('express'),
    ejs        = require('ejs'),
    path       = require('path'),
    app        = express();

app.use(express.static(path.join(__dirname, 'public')));
app.set('view engine', 'ejs');
app.set('views', './views');


app.get('/', function(req, res) {

  res.render('index');
});

var server = app.listen(8080, function() {
  var host = server.address().address;
  var port = server.address().port;
  console.log('Node is listening at http://' + host + ':' + port);
});

Answer 1

将此行添加到您的 app.js 文件中。

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

然后在项目根目录下创建一个名为public的文件夹，将css和js文件移动到该文件夹下。更好的组织方式是在 public 目录中创建名为 css 和 javascript 的文件夹，然后将 css 和 js 文件放入这些文件夹中。

然后在您的模板文件中，通过添加以下内容来包含这些内容：

link(rel='stylesheet', type='text/css', href='css/semantic.min.css')
script(src='javascript/semantic.min.js')

在 Nodejs 中加载静态资源

Loading static assets in Nodejs

node.js

express

semantic-ui