外部JS文件关联HTML失败求助：模块导入出现404错误

我尝试将JS文件中的User类导入到主文件everything.js，再关联到HTML页面，但操作失败，出现错误：
GET http://127.0.0.1:5500/Users net::ERR_ABORTED 404 (Not Found)

我在localhost环境下开发，期望点击按钮时执行createAccount函数，将用户对象添加到accounts数组并在控制台打印该数组。

我的代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
    
    <h1>Create an account!</h1>
    <script type="module" src ='everything.js'></script>

    <form>
        <label for="fname">First name:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="lname">Last name:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <label for="fname">Username:</label>
        <input type="text" id="uname" name="uname"><br><br>
        <label for="lname">Gender:</label>
        <input type="text" id="gender" name="gender"><br><br>
        <label for="fname">Address:</label>
        <input type="text" id="address" name="address"><br><br>
        <label for="lname">Add profile image:</label>
        <input type="text" id="pimage" name="pimage"><br><br>
        <input type = "button" id="caccount" name="createaccount" onclick="createAccount()" value="create account">
        <label for ="caccount">
      </form>    
</body>
</html>

主JS文件（everything.js） #

import { User } from './Users';

let accounts = [];
let firstName;
let userName;
let gender;
let address;

export function createAccount(){
    alert("Account created!");
    document.getElementById("fname").value = firstName;
    document.getElementById("uname").value = userName;
    document.getElementById("gender").value = gender;
    document.getElementById("address").value = address;
    // document.getElementById("fname").value = profileImage;

    const newUser = new User(firstName, userName, gender, address);

    accounts.push(newUser);
}

console.log(accounts);

已尝试的解决方法 #

• 使用require替代import
• 更新package.json以启用模块
• 将所有代码合并到一个文件
• 使用事件监听器

问题解决步骤 #

1. 修复模块导入路径（解决404错误） #

浏览器处理ES模块导入时，必须指定完整的文件名（包括.js后缀）。当前代码中的import { User } from './Users';会被解析为请求/Users目录，而非目标JS文件。修改为：

import { User } from './Users.js';

确保你的User类所在文件名为Users.js，且与everything.js处于同一目录下。

2. 解决模块函数无法全局调用的问题 #

由于everything.js以type="module"加载，模块内的函数默认处于模块作用域，不会挂载到全局window对象，因此HTML中的onclick="createAccount()"无法找到该函数。有两种解决方案：

• 方案一：挂载函数到全局
  在everything.js末尾添加代码，将函数暴露到全局：

  window.createAccount = createAccount;
  

• 方案二：使用事件监听器（更推荐）
  移除HTML按钮的onclick="createAccount()"属性，在everything.js中添加事件绑定：

  document.addEventListener('DOMContentLoaded', () => {
    document.getElementById('caccount').addEventListener('click', createAccount);
  });
  

  包裹在DOMContentLoaded事件中，确保DOM元素加载完成后再绑定监听器。

3. 修正表单数据获取逻辑 #

当前代码中是将变量赋值给输入框的value，逻辑完全颠倒，应该从输入框获取值赋值给变量。同时，要在函数内部打印accounts数组，否则只会打印初始的空数组：

export function createAccount(){
    alert("Account created!");
    // 从输入框获取值
    firstName = document.getElementById("fname").value;
    userName = document.getElementById("uname").value;
    gender = document.getElementById("gender").value;
    address = document.getElementById("address").value;

    const newUser = new User(firstName, userName, gender, address);
    accounts.push(newUser);
    console.log(accounts); // 在函数内打印，确保看到最新数组
}

4. 清理冗余操作 #

• 浏览器原生支持ES模块，无需使用require或修改package.json；
• 无需合并代码，保持模块化结构更利于维护。

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