如何在Node.js应用的EJS文件中引入JS脚本？

嘿，我看你在OpenClassroom学Node.js用EJS模板引擎时，碰到了前端JS脚本跑不起来的问题，咱们一步步捋清楚问题出在哪～

首先先确认几个关键配置和细节，这些都是新手常踩的坑：

1. 先把Express的基础配置补全 #

你贴的app.js片段里有express、session、body-parser，但还缺了EJS模板引擎配置和静态资源托管，这俩是前端脚本能正常加载的核心：

var express = require('express');
var session = require('cookie-session');
var bodyParser = require('body-parser');
var app = express();

// 告诉Express用EJS当视图引擎
app.set('view engine', 'ejs');
// 指定模板文件的目录（默认就是views，加上更稳妥）
app.set('views', __dirname + '/views');

// 托管静态资源（你的js目录里的脚本全靠这个才能被前端访问到）
app.use(express.static(__dirname + '/js'));

// 配置body-parser（你原来的代码没写完，补全）
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

// 配置session（补全基础配置）
app.use(session({
  secret: 'your-custom-secret-key', // 换成你自己的密钥字符串
  resave: false,
  saveUninitialized: true
}));

// 必须加路由才能渲染EJS页面！
app.get('/', (req, res) => {
  // 可以传些测试数据给模板，方便验证
  res.render('todo', { testMsg: 'EJS模板加载成功！' });
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器跑起来啦：http://localhost:3000');
});

2. 前端EJS模板里的脚本引用要正确 #

比如你的todo.ejs里，引用js目录下的main.js时，一定要用根路径（避免路由变化导致相对路径失效）：

<!DOCTYPE html>
<html>
<head>
  <title>待办列表</title>
</head>
<body>
  <h1><%= testMsg %></h1>
  
  <!-- 这样引用你的前端脚本 -->
  <script src="/main.js"></script>
</body>
</html>

3. 排查必做的几个小检查 #

• 确认所有依赖都装了：运行npm install express ejs body-parser cookie-session，保证node_modules里有这些包；
• 打开浏览器开发者工具（F12）：
  • 看Console面板：有没有脚本语法错误、资源加载失败的提示；
  • 看Network面板：刷新页面后，你的JS文件是不是返回200状态（成功加载）；
• 确认你的前端JS脚本本身没有逻辑错误，比如写个最简单的测试代码：

// js/main.js
console.log('终于加载成功啦！');
alert('Hello EJS + Node.js！');

如果做完这些还是有问题，把浏览器Console里的错误信息贴出来，咱们再精准定位～

内容的提问来源于stack exchange，提问作者Théo.B