我在获取 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 文件“又名 js 和 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"/>

此致，

弗雷德·K

Answer 1

将app.use(express.static(__dirname + '/bower_components'));添加到app.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');
})