HTML中导入简单JS模块失效问题求助

以下是你可能踩的几个坑，逐一排查：

• 检查f.js的导出语法
  必须在f.js里明确导出printHello函数，否则导入时根本拿不到这个方法。比如：

  export function printHello() {
    // 你的DOM操作逻辑
    const helloElem = document.createElement('p');
    helloElem.textContent = 'Hello World';
    helloElem.style.background = 'red';
    document.body.appendChild(helloElem);
  }
  

  没加export关键字的话，模块导入完全无效。

• file://协议的跨域限制
  Firefox直接打开本地HTML文件用的是file://协议，这种情况下浏览器的CORS安全策略会阻止模块脚本加载——因为模块导入要求必须通过HTTP(S)协议访问。
  解决办法是启动一个本地HTTP服务器，比如用Python快速搭建：

  # Python 3版本
  python -m http.server 8000
  # Python 2版本
  python -m SimpleHTTPServer 8000
  

  之后在浏览器访问http://localhost:8000/try1.html，就能正常加载模块了。

• 确认导入路径的正确性
  导入模块时必须写相对路径（带./），不能直接写文件名。正确的导入写法是：

  import { printHello } from './f.js';
  printHello();
  

  路径写错会导致控制台报404错误，按F12打开开发者工具就能看到具体报错信息。

• 确保DOM加载完成后执行函数
  模块脚本是延迟执行的，但如果你的printHello函数需要操作DOM，最好等页面DOM完全加载后再调用。可以把脚本放在<body>标签末尾，或者用事件监听：

  import { printHello } from './f.js';
  document.addEventListener('DOMContentLoaded', () => {
    printHello();
  });
  

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