使用SystemJS运行Hello World模块时出现404 Fetch错误求助
看起来你遇到了SystemJS模块加载的路径问题，404错误说明SystemJS找不到你要导入的模块文件。咱们一步步来排查解决：
先确认文件结构是否正确
首先检查你的项目文件是否都在正确的位置，标准的结构应该和你的localhost服务根目录对应：项目根目录/ ├── index.html ├── system.js ├── main.js └── module.js // 你在main.js里导入的模块文件，名字要和导入语句完全对应如果
module.js不存在，或者放在了子文件夹里，肯定会触发404错误。检查main.js里的导入路径
错误提示里提到Instantiating http://localhost:3000/module，说明你的main.js里应该有类似import xxx from 'module'的语句。SystemJS默认会把这种无相对路径的导入当成根目录下的module.js，如果你的模块文件名不是这个，或者需要指定相对路径，要及时调整：- 如果模块和main.js同目录，改成
import xxx from './module.js'（加上./明确表示当前目录） - 如果模块在子文件夹，比如
src/module.js，要写import xxx from './src/module.js'
- 如果模块和main.js同目录，改成
配置SystemJS的基础路径
给SystemJS加个基础配置，避免路径解析出错。在index.html里的SystemJS.import之前加上配置：<script src="./system.js"></script> <script> SystemJS.config({ baseURL: './', // 明确指向项目根目录 defaultExtension: 'js' // 自动给无后缀的模块名加上.js后缀 }); SystemJS.import('main.js'); </script>这样SystemJS会按照你指定的baseURL去查找所有模块，减少路径歧义。
确认服务器的服务目录
你用localhost:3000运行项目，要确保你的服务器（比如http-server、live-server）是从项目根目录启动的。比如如果你在父目录启动服务器，那http://localhost:3000/module会指向父目录下的module.js，自然找不到。重新从项目根目录启动服务器即可。检查文件名大小写
注意Linux/macOS系统是大小写敏感的，如果你的模块文件名是Module.js，但导入时写的module，就会出现404。要保持文件名和导入语句的大小写完全一致。
示例代码参考
如果按照正确配置，你的文件内容应该类似这样：
module.js：export const message = 'Hello World from module!';main.js：import { message } from './module.js'; // 把模块内容添加到页面 document.body.innerHTML += `<p>${message}</p>`; console.log(message);index.html：<html> <body> <p>Hello World from html!</p> <script src="./system.js"></script> <script> SystemJS.config({ baseURL: './', defaultExtension: 'js' }); SystemJS.import('main.js'); </script> </body> </html>
内容的提问来源于stack exchange，提问作者czr
