javascript - JS 文件得到一个 net::ERR_ABORTED 404 (Not Found)

Question

我正在尝试创建一个简单的 Io-web-chat。我最近想分开我的 <script>在我的 html 文件中到外部 js 文件。

这是我非常简单的文件夹结构:

Chat
|-- index.html
|-- index.js
`-- server.js

html文件的相关部分:

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="index.js"></script>
</body>
</html>

index.js文件相关部分:

$(function() {

  //Initialize variables
  var $messageArea = $('#messages');
  var $InputMessage = $('#InputMessage');
  var $InputName = $('#InputName');

  //Initialize Socket
  var socket = io();

  //Send server Your message
  socket.emit('chat message', $InputMessage.val());

});

server.js文件的相关部分:

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

我还尝试将我的文件放入他们在 socket.io 示例中拥有的公共(public)类型结构中:

Chat
|-- Public
|   |-- index.html
|   `-- index.js
`-- server.js

在那种情况下我改变了: src="/index.js"在 html 中添加 /public/index.html进入 server.js 文件但运气不好。

这一切都在本地主机上运行。我在这里做错了什么？

Answer 1

如评论中所述:您需要一种将静态文件发送到客户端的方法。这可以通过像 Nginx 这样的反向代理来实现，或者简单地使用 express.static() 来实现。 .

将所有“静态”(css、js、图像)文件放在一个专用于它的文件夹中，这与放置“ View ”(在您的案例中为 html 文件)的位置不同。例如，我将其称为 static。完成后，将此行添加到您的服务器代码中:

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

这将通过/static 路由有效地为“静态”文件夹中的每个文件提供服务。

在客户端查询你的 index.js 文件变成:

<script src="static/index.js"></script>