如何修复Thunder Client扩展报错？已全局安装Node.js

可能的报错原因 #

• 直接打开build目录下的HTML文件：该HTML中的静态资源采用绝对路径（如/static/js/bundle.js），本地直接打开时浏览器会从文件系统根目录查找资源，而非项目build目录，导致资源找不到报错。
• 项目本地依赖未安装：仅全局安装Node.js不够，项目本地的React相关依赖未安装时，运行开发命令会报错。
• Thunder Client使用场景错误：Thunder Client是API测试工具，用于发送HTTP请求测试后端接口，而非打开前端页面，用它请求静态HTML会引发资源加载问题。

解决方法 #

1. 通过开发服务器运行项目 #

• 进入项目根目录，执行 npm install 安装本地依赖
• 执行 npm start 启动开发服务器，浏览器会自动打开 http://localhost:3000，此时资源路径会被正确解析。

2. 正确运行build后的生产版本 #

如果需要运行打包后的生产代码：

• 全局安装静态文件服务器：npm install -g serve
• 进入项目的build目录，执行 serve -s .，访问服务器输出的地址即可正常加载资源。

3. 正确使用Thunder Client #

若要测试前端页面，直接用浏览器打开开发服务器地址；若要测试API接口，在Thunder Client中输入接口URL（如http://localhost:3000/api/data）进行请求测试。

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