求助：将JavaScript类导入HTML文件时遇到执行异常问题

你的代码问题出在带src属性的type="module"脚本标签不能同时包含内部代码，浏览器会直接忽略标签内的导入和实例化代码，导致逻辑完全不执行。以下是具体修复方案：

方案1：拆分模块化脚本（推荐） #

保持你的Assets/testfunction.js文件不变：

class Person2 {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

    getName() {
        return this.name;
    }
    getAge() {
        return this.age;
    }
}

export default Person2;

然后修改HTML，将导入和业务逻辑放到单独的模块脚本中：

<script type="module">
  // 注意路径要和HTML文件的位置对应，确保能找到testfunction.js
  import Person2 from "./Assets/testfunction.js";
  
  let p = new Person2("1", 1);
  console.log(p.getAge());
</script>

如果想更规范，也可以把业务逻辑放到另一个js文件（比如main.js）：

// Assets/main.js
import Person2 from "./testfunction.js";

let p = new Person2("1", 1);
console.log(p.getAge());

然后HTML只需要引入这个入口脚本：

<script type="module" src="Assets/main.js"></script>

方案2：直接在HTML模块脚本中定义类 #

如果不想拆分文件，也可以直接把类的定义和使用写在同一个模块脚本里：

<script type="module">
  class Person2 {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }

    getName() {
      return this.name;
    }
    getAge() {
      return this.age;
    }
  }

  let p = new Person2("1", 1);
  console.log(p.getAge());
</script>

额外注意事项 #

• 模块脚本必须在服务器环境下运行（比如用VSCode的Live Server插件启动本地服务），直接打开本地HTML文件（file://协议）会触发CORS限制，导致模块加载失败。
• 导入路径要准确，相对路径是相对于当前HTML文件的位置，别写错层级。

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