配置节点快递服务静态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')));

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

这是来自另一个SO问题的注释，根据我的理解，它非常好

path.join将处理不必要的定界符，如果给定的路径来自未知来源（例如，用户输入，第三方API等），则可能会发生不必要的定界符。

所以path.join（'a /'，'b'）path.join（'a /'，'/ b'），path.join（'a'，'b'）和path.join（'a'， '/ b'）都将给出a / b。

如果不使用它，您通常会期望所加入路径的起点和终点，因为它们只有一个斜线或一个斜线。

可以在.bowerrc文件中使用JSON配置Bower 。

在.bowerrc具有内容的项目的根目录中添加具有以下内容的文件。

{
  "directory": "public/bower_components"
}

这会将您所引用的Bower组件放置在正确的库中，并且您无需在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>

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定义bower_components是静态路径：

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

在我玉模板中，我引用jquery和bootstrap像这样：

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')))

就我而言，这是一条正确的道路。

这也适用于我：

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

确保您已重置本地服务器，或者确保您正在运行nodemon以查看所做的更改！