javascript - 我在让我的 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');
})