我在获取js和css文件的src标签时遇到问题

Question

我正在尝试使用HTML5 boostrap express js angular和jquery来处理示例Web应用程序。我一直在与我试图包含的js和css文件的源标签作斗争，除非我使用在线托管的文件，否则无法让它们工作。如果任何人有空闲时间，我的标题代码是什么

index.html
<script type="text/javascript" src="/bower_components/jquery/dist/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.css"/>
<script type="text/javascript" src="/bower_components/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
------------------------------------------------------------------------------------
app.js
var express = require('express');
var path = require('path');
var app = express();

//config
app.set('views', __dirname + '');
app.engine('html', require('ejs').renderFile);

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

//server
app.listen(1337,function(){
console.log('ready on port 1337');
})

这是我文件结构的截图

我的服务器正在位于根文件夹中的app.js中运行。我已经尝试了许多变化的../而没有斜线甚至是〜试图让它运行。感谢您提前的时间。

编辑因此，当我一直在搞乱时，我意识到如果我打开index.html文件而不在我的快速服务器上运行它就可以了。我已更新上面的代码部分以包含我的app.js.

解决 非常感谢suchit，dfsq和Anubhav。 所以，因为我使用express我需要告诉express如何正确路径到我的app.js中的静态src文件“aka the js and css”。因此，如果您在快速服务器上运行应用程序，我提供的答案只是相关的。我将提供添加到我的app.js文件和我的index.html文件的代码，以找到解决方案。

app.js


app.use(express.static(__dirname + '/bower_components'));
--------------------------------------------------
index.html


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

此致

Fred K

Answer 1

将app.use(express.static(__dirname + '/bower_components'));添加到a​​pp.js （这是一个配置）然后链接到静态文件可以写成<script type="text/javascript" src="/bootstrap/dist/js/bootstrap.js"></script>

这假设所有静态文件（如javascript和CSS文件）都位于/bower_components文件夹中。

该语句指示应用程序为所有静态文件生成/bower_components根。

app.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 + '/bower_components'));

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

//server
app.listen(1337,function(){
    console.log('ready on port 1337');
})