configuration节点快递服务静态bower_components?

我有一个目录结构

projectName | - bower_components/ | - public/ | - css | - js | - index.html | - Gruntfile.js | - package.json | - bower.json | - app.js 

我想开始我的应用程序,并与节点服务index.html 。 所以在app.js我有:

 var express = require('express'); var port = process.env.PORT || 3000; var app = express(); app.configure(function(){ // Serve up content from public directory app.use(express.static(__dirname + '/public')); app.use(app.router); app.use(express.logger()); }); app.listen(port, function(){ console.log('Express server listening on port ' + port); }); 

index.html的底部我有:

 <script src="../bower_components/jquery/jquery.js"></script> <script src="../bower_components/d3/d3.js"></script> <script src="../bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="bower_components/spin.js/spin.js"></script> <script src="bower_components/mustache/mustache.js"></script> 

当我启动服务器, index.html显示,但没有上述库加载。 我得到错误(404):

 GET http://localhost:3000/bower_components/jquery/jquery.js 404 (Not Found) localhost/:32 GET http://localhost:3000/bower_components/d3/d3.js 404 (Not Found) localhost/:33 GET http://localhost:3000/bower_components/bootstrap/dist/js/bootstrap.js 404 (Not Found) localhost/:34 GET http://localhost:3000/bower_components/spin.js/spin.js 404 (Not Found) localhost/:35 GET http://localhost:3000/bower_components/mustache/mustache.js 404 (Not Found) 

如何从bower_components提供文件?

我使用这个设置:

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

所以任何Bower组件都是这样从HTML加载的:

 <script src="/bower_components/..."></script> 

而任何其他客户端的JS / CSS( public/ )是这样加载:

 <script src="/js/..."></script> 

你应该使用

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

请注意与@robertklep答案不同的(path.join)的用法

这里是另一个SO的问题 ,据我所知,这个问题非常好

path.join会照顾不必要的分隔符,如果给定的path来自不明来源(例如,用户input,第三方API等),则可能发生这种分隔符。

所以path.join('a /','b')path.join('a /','/ b'),path.join('a','b')和path.join('a', '/ b')将全部给出a / b。

如果不使用它,通常会对join的path的开始和结束有所期待,因为他们知道它们只有一个或者一个斜线。

Bower可以在.bowerrc文件中使用JSON进行configuration。

在项目的根目录下添加一个带有以下内容的.bowerrc文件。

 { "directory": "public/bower_components" } 

这将把您正在引用的凉亭组件放在正确的库中,并且您将不需要express中的提取静态目录。

将您的目录结构更改为:

 projectName | - public/ | - bower_components/ | - css | - js | - index.html | - Gruntfile.js | - package.json | - bower.json | - app.js 

并在index.html做以下更改:

 <script src="../public/bower_components/jquery/jquery.js"></script> <script src="../public/bower_components/d3/d3.js"></script> <script src="../public/bower_components/bootstrap/dist/js/bootstrap.js"></script> <script src="public/bower_components/spin.js/spin.js"></script> <script src="public/bower_components/mustache/mustache.js"></script> 

或者另一种方法是将您的bower_components文件夹作为静态内容切断。 (您可以多次注入static middleware以进行快速处理)
在应用程序congfig中添加以下内容以表示。 那么你的configuration代码如下所示:

 var express = require('express'); var port = process.env.PORT || 3000; var app = express(); app.configure(function(){ // Serve up content from public directory app.use(express.static(__dirname + '/public')); app.use(express.static(__dirname + '/bower_components')); app.use(app.router); app.use(express.logger()); }); app.listen(port, function(){ console.log('Express server listening on port ' + port); }); 

在这种情况下,你的目录结构保持不变。 希望这可以帮助。
快乐编码.. 🙂

我在用着:

 $ npm -version && node -v 2.11.3 v0.12.7 

而我的app.js将这个定义为静态path的bower_components

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

在我的Jade模板中,我像这样引用了jquerybootstrap

 doctype html html head title= title link(href='bootstrap/dist/css/bootstrap.min.css', rel='stylesheet') link(href='bootstrap/dist/css/bootstrap-theme.min.css', rel='stylesheet') body block content script(type='text/javascript', src='jquery/dist/jquery.js') script(type='text/javascript', src='bootstrap/dist/js/bootstrap.js') 

我正在运行Windows 7(x64)。

希望这有助于某人。

将bower_components移到另一个文件夹之后出现同样的问题。 这帮助我了解发生了什么事情。 该文档很有用: https : //github.com/expressjs/serve-static

我把这个代码放到我的node / express app.js文件中:

 console.log('DIRNAME:', __dirname, 'JOINED:', path.join(__dirname, '../../bower_components')); 

这是从index.html

 <script src="/bower_components/jquery/dist/jquery.js"></script> <script src="/bower_components/angular/angular.js"></script> 

并在app.js

 app.use('/bower_components', express.static(path.join(__dirname, '../../bower_components'))) 

这是我的情况下正确的path。

这也适用于我:

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

确保你已经重置你的本地服务器,或者确保你正在运行nodemon来查看你的改变!