我有一个目录结构
projectName | - bower_components/ | - public/ | - css | - js | - index.html | - Gruntfile.js | - package.json | - bower.json | - app.js
我想启动我的应用并index.html与节点一起使用。所以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/)的加载方式如下:
public/
<script src="/js/..."></script>