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模板中，我像这样引用了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')))
这是我的情况下正确的path。
这也适用于我：
app.use('/bower_components', express.static(__dirname + '/bower_components'));
确保你已经重置你的本地服务器，或者确保你正在运行nodemon来查看你的改变！
