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

【问题标题】：Chrome wont load my js script fileChrome 不会加载我的 js 脚本文件
【发布时间】：2018-12-23 09:06:37
【问题描述】：

这是我在我的计算机上设置的一个简单服务器，我要做的就是在我的 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 中加载它时，我得到的只是下面的内容，我得到了这个

【问题讨论】：

标签： javascript html node.js google-chrome scripting

【解决方案1】：

我知道我回复晚了，但问题没有得到解答，我自己也遇到了这个问题（虽然服务器路径正确，但 Base HTML 调用自定义 JS 脚本时未发现 404 错误）并且为解决问题而费了一番功夫。因此，为未来的读者发布一个可能的解决方案。

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

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

【讨论】：

【解决方案2】：

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

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

或者你可以改变路线到

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

【讨论】：

【解决方案3】：

_dirname 未被清除。其次，

var express=require('express');

未声明。

你在用 NodeJS 吗？

你能上传一个目录结构吗？还是IDE？

因为看起来您的 chrome 找不到 app.js，因为它会抛出 HTTPStatusCode 404 - Not Found

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

【讨论】：

【解决方案4】：

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

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

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

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

【讨论】：

【解决方案5】：

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 文件。

【讨论】：