HTML中如何配置JavaScript路径？局域网下socket.io引用失效解决

• 断公网后功能失效的两个核心诱因：
  • 引用的jQuery来自公网CDN（http://code.jquery.com/...），没有公网连接时浏览器根本拉不到这个文件
  • 原写法的/socket.io/socket.io.js并不是本地实际存在的文件路径：这个路径是socket.io服务启动后自动生成的虚拟访问路径，只要服务端的socket.io模块没正确初始化、或者静态路径映射被拦截，浏览器请求这个路径就会直接404，导致全局的io对象不存在，所有socket相关逻辑直接报错失效。
• 你现在已经把socket.io客户端源码装到app\node_modules\socket.io\client-dist下，完全不需要依赖服务端的虚拟映射，直接把文件挪到可直接访问的静态目录、改对引用路径就能解决问题。

• 第一步：整理静态文件存放目录
  不要直接引用node_modules目录下的文件：这个目录默认是服务端依赖路径，绝大多数托管配置都会屏蔽对node_modules下文件的直接浏览器访问，就算路径写对也大概率404。
  按照下面的结构调整文件位置：

  C:\app\
  ├─ server.js
  ├─ index.html
  ├─ static\ （新建的静态资源目录，和node_modules同级）
  │  ├─ jquery-1.7.2.min.js （从公网下载一次存到本地，避免断网加载失败）
  │  └─ socket.io.min.js （从app\node_modules\socket.io\client-dist目录里复制过来的压缩版客户端文件）
  └─ node_modules\
     └─ ... （原有的服务端依赖保持不变）
  

• 第二步：替换index.html里的脚本引用
  把原来的公网CDN、虚拟路径引用，全部换成指向本地static目录的相对路径：

  <script src="./static/jquery-1.7.2.min.js"></script>
  <script src="./static/socket.io.min.js"></script>
  

• 第三步：给server.js补静态资源托管配置
  如果你的服务是用Express搭建的，只要加一行静态资源中间件，就能让static目录下的文件可以被局域网内的设备正常访问：

  const express = require('express');
  const app = express();
  // 把static目录设为可对外访问的静态资源路径
  app.use(express.static('./static'));
  
  // 你原有的socket.io初始化逻辑保持不变即可
  const http = require('http');
  const server = http.createServer(app);
  const io = require('socket.io')(server);
  server.listen(3000, '0.0.0.0'); // 绑定0.0.0.0保证局域网内其他设备也能访问
  

• 快速排查技巧
  改完路径后如果还是功能异常，按F12打开浏览器开发者工具，切到「网络」面板刷新页面：
  • 如果对应的js文件请求状态是404，直接对照文件实际存放的位置修正相对路径
  • 如果文件请求状态是200，但控制台报io is not defined，就检查你复制的socket.io文件是不是client-dist目录下的客户端版本，别误拷成服务端模块的代码文件。

内容的提问来源于stack exchange，提问作者DeoChandra