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

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

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

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

修改我试图这样做：

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

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

无论如何要从语义文件夹中要求它们吗？我喜欢它们是从同一个空间构建和需要的。

修改

查看：

<!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>

Serverjs：

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文件移动到此文件夹。组织事情的更好方法是在公共目录中创建名为css和javascript的文件夹，然后将css和js文件放在这些文件夹中。

然后在您的模板文件中，添加以下内容：

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

在Nodejs中加载静态资产

1 个答案: