Question

我正在尝试使用节点js服务器提供像.css .js这样的静态文件。 index.html文件被提供，链接的css和js也被加载。

现在我在index.html文件中有一个div，我在其中加载另一个名为login.html的html文件的内容。此login.html文件具有链接到它的css和js文件。 login.html本身使用jquery函数load（）加载，这意味着它可以由服务器访问。但是，由于文件路径错误，链接到login.html的css和js无法加载。

这是文件夹结构see this image

以下是index.html

的主要部分

<!DOCTYPE html>
<html>
    <head>
        <title>Anything</title>
        <link href="./index/index.css" type="text/css" rel="stylesheet">  //These files
        <script src="./Resources/jquery/jquery-3.2.1.js"></script>        //get loaded
        <script src="./index/index.js"></script>                          //by the server
    </head>
    <body>
        <div class="content"></div>     // I am trying to load login.html here
    </body>
</html>

这是jquery函数

$(".user").click(function(){                       
        $(".content").load("./../pages/login/login.html");  
 });

＆＃34;的.user＆＃34;在index.html

中显示的不是我的天堂

这是login.html

<link href="./login.css" type="text/css" rel="stylesheet">  //doesn't load
<script src="./login.js"></script>                          //doesn't load
<h2>Login is loaded</h2>

最后这里是用于创建节点js服务器的server.js

var express = require("express");
var app = express();
var path = require("path");

app.set('port', 8080);
app.use(express.static(path.join(__dirname, "public")));
app.use(express.static(path.join(__dirname, "login")));

var server = app.listen(app.get('port'), function() {
  var port = server.address().port;
});

console.log("Server running.");

我知道css和js文件没有加载，因为我在chrome开发人员工具窗口中看到了这个错误：

GET http://localhost:8080/login.css

结论：服务器无法加载二次提供的html文件的css和js文件，因为请求网址错误。但是，index.css和index.js文件由正确的url加载。

目标：使用此节点js服务器通过login.html页面加载login.css和login.js.

Answer 1

您可以使用base元素指定网站的基本路径，然后相应地修改样式/脚本链接，以便从一个基本路径请求它们。

Answer 2

您需要更改login.html中的相对路径以匹配服务器上的相对路径，以便./login.css成为./../pages/login/login.css（就像您用来加载login.html的路径一样文件）

css js在使用节点服务器时没有链接到链接的html文件

2 个答案: