NodeJS项目中前端脚本出现require未定义及404错误求助

错误原因解析 #

1. ReferenceError: require is not defined
require()是Node.js专属的模块加载语法，浏览器原生环境不支持。你试图在前端运行的script.js中引用后端的app.js，这是逻辑错误——后端代码运行在服务器端，前端代码运行在用户浏览器，两者无法通过Node.js模块语法直接交互。

2. 404文件未找到错误
   当你把script.js移到根目录后，未配置对应的静态资源目录，Express不会自动暴露根目录下的文件给前端。浏览器请求../script.js时（实际对应服务器URL为/script.js），服务器找不到该文件，因此返回404。VSCode的Ctrl+click能打开是因为它识别的是本地文件路径，和浏览器请求的服务器路径无关。

解决方案 #

方案1：通过EJS模板直接传递数据（推荐） #

既然数据已存在于后端，最直接的方式是将数据传给EJS模板，在页面渲染时直接生成内容，无需前端额外请求：

1. 修改app.js中的路由，把myUsers传递给模板：

app.get("/users", (req, res) => {
    res.render("users", { myUsers: myUsers })
})

2. 修改users.ejs，直接在模板中使用数据：

<%- include ('partials/header'); -%>
<p id="usr">Users are : <%= myUsers.join(', ') %></p>
<%- include ('partials/footer'); -%>

页面渲染时会直接显示用户列表，无需额外前端脚本。

方案2：通过API接口让前端动态获取数据（适合动态加载场景） #

如果需要前端动态获取数据，可以将后端数据封装成API接口，前端用fetch请求：

1. 在app.js中添加API路由：

app.get("/api/users", (req, res) => {
    res.json({ myUsers: myUsers })
})

2. 修改script.js，移除require，改用fetch请求数据：

async function loadUsers() {
    try {
        const response = await fetch('/api/users');
        const data = await response.json();
        const p_users = document.getElementById("usr");
        p_users.innerHTML += data.myUsers.join(', ');
    } catch (err) {
        console.error('加载用户数据失败:', err);
    }
}
loadUsers();

3. 确保users.ejs中的脚本路径正确（使用绝对路径更可靠）：

<script type="module" src="/utils/script.js"></script>

由于你已配置/utils为静态目录，绝对路径/utils/script.js可正确访问脚本文件。

静态文件路径补充说明 #

如果要将前端脚本放在根目录或自定义目录，需在app.js中配置对应静态资源目录：

• 若脚本在根目录，添加：

app.use(express.static(path.join(__dirname, '.')))

前端路径用/script.js即可访问。

• 更规范的做法是创建public文件夹存放所有前端静态资源（脚本、样式、图片等），然后配置：

app.use(express.static(path.join(__dirname, 'public')))

将script.js放入public后，前端路径用/script.js访问。

内容的提问来源于stack exchange，提问作者Sébastien R