设置express以启用静态css和js文件

时间:2015-01-03 02:40:45

标签: html node.js express

我在设置应用程序的中间件时遇到问题,因此它会为我的一些静态文件提供服务,例如css和js。我希望能够在index.html中的公共目录中包含我的css和js文件。

This is a picture of my current file structure.

这是我的快递服务器的代码。

server.js

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

//config
app.set('views', __dirname + '');
app.engine('html', require('ejs').renderFile);
//app.use(express.static(__dirname + '/')); worked when everything was in jqtest

app.use(express.static(__dirname + '/public'));

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

app.env
//server
app.listen(process.env.PORT || 5000);
console.log('app live in 5000');

这些是我试图在我的index.html中使用的src标记,但是不起作用。我知道我可能还需要为组件中的jquery文件设置一个额外的app.use。

index.html

<link rel="stylesheet" type="text/css" href="/public/css/style.css"/>
<script type="text/javascript" src="/components/jQuery/dist/jquery.js"></script>
<script type="text/javascript" src="/public/js/myJS.js"></script>

修改1 我为这个项目公开了我的github。它可用Here

修改2

已经回答了这个问题。非常感谢teleaziz7zark7帮助指导我完成此过程。

解决方案:

第1步:

因此,在根导向器之外删除应用程序服务器代码时的问题是__dirname不是全局变量。为我的静态文件设置路由的第一步是告诉我的服务器新的根目录。我通过添加teleaziz提供的这行代码

来做到这一点
var root = path.normalize(__dirname + '/..'); 

第2步:

一旦我这样做了,我必须改变公共路由,而不是像teleaziz所建议的那样使用root而不是__dir

app.use(express.static(root + '/public'));

第3步:

一旦完成,我就按照teleaziz和7zark7的建议从index.html中的src中删除/ public /。我的新src标签看起来像这样。

<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<script type="text/javascript" src="/components/jQuery/dist/jquery.js"></script>
<script type="text/javascript" src="/js/myJS.js"></script>

2 个答案:

答案 0 :(得分:1)

__dirname不是一个全局对象,(即使在全局对象下的docs列表中,这会让读者感到困惑!)。它实际上仅限于模块范围,它总是引用包含模块的文件夹。在你的情况下是服务器文件夹,它不是你的项目根目录,

因此,查看文件结构可以:

  • 首先要求路径模块帮助规范化路径:

    var path = require('path');
    var root = path.normalize(__dirname + '/..');
    
  • 将__dirname的使用更改为root:

    app.use(express.static(root + '/public'));
    

答案 1 :(得分:0)

从这些中移除public

<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<script type="text/javascript" src="/js/myJS.js"></script>

通过映射:

app.use(express.static(__dirname + '/public'));

您不需要public