JS文件获取了net :: ERR_ABORTED 404（未找到）

Question

我正在尝试创建一个简单的Io网络聊天。我最近想将<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示例中具有的公共类型结构中：

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

在那种情况下，我更改了： src="/index.js"在html中添加/public/index.html到server.js文件中，但是没有运气。

这些都在localhost中运行。我在这里做错了什么？

Answer 1

就我而言，以下行给了我错误

import { myFunc } from './config'

在导入中添加文件扩展名解决了该问题。

import { myFunc } from './config.js'

Answer 2

我有一个类似的问题，通过省略代码中的前导斜杠解决了。例如替换/js/script.js为js/script.js.

Answer 3

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

将所有“静态”（css，js，图像）文件放在专用于其的文件夹中，与放置“视图”（本例中的html文件）的位置不同。我将其static称为示例。完成后，在服务器代码中添加以下行：

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

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

因此，在客户端中查询index.js文件将变为：

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