Question

这是我在计算机上设置的简单服务器，我要做的就是将脚本文件加载到html文件中。

var express=require('express');



  var app=express();
  app.listen(3000);

  app.use(express.static('/scripts'));

  app.get('/', function(req,res){
  res.sendFile(__dirname+'/index.html');
 });

 Here is my html file containing the script 

<!doctype html>
 <html>
 <head>
 <title>Async Javascript</title>

</head>
<body>
<h1>Hello Web</h1>

  <!--scripts-->
 <script  src="scripts/app.js"></script>

</body>
</html>

但是，当我将其加载到chrome中时，我得到的只是以下内容，我得到了

Answer 1

Chrome在 localhost：3000 /scripts/app.js上查找文件时找不到它。您要执行的操作是根据当前文件夹到您指定的相对路径的位置查找文件。您有两种方法可以解决此问题。在您的Express代码中，添加以下代码：

app.get('/scripts/app.js', function(req,res){
    res.sendFile(__dirname+'/scripts/app.js');
});

该代码意味着当文件请求发送到localhost：3000 / scripts / app.js时，它将从正确的位置发送app.js文件。

Answer 2

我只是将您的代码复制到了自己的文件系统中，只是我确保目录设置正确。它为我工作。这是我得到的图像：enter image description here

问题在于您要保存HMTL文件或Javascript文件。这行代码在这里：

 <script  src="scripts/app.js"></script>

确保您的HTML文件不在脚本目录中，请仔细检查文件的保存位置。更改此行代码以指向app.js的保存位置，或更改HTML文件的保存位置。

Answer 3

_dirname 未取消。其次，

var express=require('express');

未声明。

您正在使用NodeJS吗？

您可以上传目录结构吗？还是IDE？

因为看起来您的镶边无法找到app.js，因为它抛出了HTTPStatusCode 404-未找到

我认为您需要再指定一个文件夹！

Answer 4

设置快递路线的方式必须像访问文件一样

 <script  src="app.js"></script>

或者，您可以将路线更改为

app.use('/scripts',express.static('scripts'));

Answer 5

我知道我要回复的很晚，但是问题没有得到解决，我自己也遇到了这个问题（尽管服务器路径正确，但当Base HTML调用自定义JS脚本时，404错误未找到），并为解决该问题而苦苦挣扎。因此，为将来的读者发布一种可能的解决方案。

解决方案的关键是默认情况下，Express不允许提供静态文件。我们需要在主服务器代码（index.js或main.js）中指定静态文件（例如JS，CSS等）的路径。因此，必须在NodeJS应用程序目录中将文件夹指定为静态文件夹。请记住，当执行节点应用程序时，main.js / index.js文件位置的路径被视为 web-root 或 root目录。这就是我所做的。 my_app.use（my_express.static（__ dirname +'/ public'））;

此处__dirname是Node.js全局变量，它表示 web-root 或 root目录，而'public'是该目录存储所有将发送到客户端（浏览器）的静态文件。文件夹的名称可以是任何东西。因此，此后可以访问我从基本html（index.html）调用的自定义JS脚本，并解决了404错误。

Chrome不会加载我的js脚本文件

5 个答案: