Node.js如何将变量传递至与HTML一同渲染的JS文件？

首先明确：直接将后端变量注入到静态的/public/js/app.js中是不可行的，因为public目录下的静态文件会被Express直接返回给浏览器，不会经过EJS模板渲染流程。不过有几种比内联脚本更优雅的替代方案：

方案1：将JS文件作为EJS模板渲染 #

把原本的静态JS文件移到views目录，通过Express路由渲染它，这样就能传递后端变量：

修改后端app.js #

app.use(express.static("public"));

// 处理JS文件的请求，作为模板渲染
app.get("/js/app.js", function (req, res) {
  var myvar = "Hello";
  // 设置响应头为JS类型，渲染对应的EJS模板
  res.setHeader('Content-Type', 'application/javascript');
  res.render("js/app.ejs", { myvar: myvar });
});

app.get("/my-page", function (req, res) {
  res.render("my-page.ejs");
});

新建/views/js/app.ejs（原/public/js/app.js内容改造） #

var myvar2 = "<%= myvar %>" + " World!";
console.log(myvar2);

修改/views/my-page.ejs的JS引用 #

<h1>Hello World</h1>
<script type="text/javascript" src="/js/app.js"></script>

方案2：通过HTML的data属性传递变量 #

在EJS模板里把后端变量存在HTML元素的data属性中，前端JS读取这个属性值：

修改/views/my-page.ejs #

<h1>Hello World</h1>
<!-- 用隐藏元素存变量 -->
<div id="app-config" style="display: none;" data-myvar="<%= myvar %>"></div>
<script type="text/javascript" src="./js/app.js"></script>

修改后端app.js的渲染逻辑 #

app.get("/my-page", function (req, res) {
  var myvar = "Hello";
  // 把变量传递给EJS模板
  res.render("my-page.ejs", { myvar: myvar });
});

修改/public/js/app.js #

// 读取data属性中的变量
const myvar = document.getElementById('app-config').dataset.myvar;
var myvar2 = myvar + " World!";
console.log(myvar2);

方案3：通过API接口异步获取变量 #

后端提供一个接口返回配置数据，前端JS通过fetch请求获取：

修改后端app.js #

app.get("/my-page", function (req, res) {
  res.render("my-page.ejs");
});

// 新增配置接口
app.get("/api/config", function (req, res) {
  res.json({ myvar: "Hello" });
});

修改/public/js/app.js #

// 异步请求获取变量
fetch('/api/config')
  .then(response => response.json())
  .then(config => {
    var myvar2 = config.myvar + " World!";
    console.log(myvar2);
  });

各方案特性：

• 方案1：适合需要在JS加载时同步拿到变量的场景，但JS文件无法作为静态资源缓存。
• 方案2：同步获取变量，逻辑简单，适合少量变量传递。
• 方案3：前后端解耦，适合复杂配置或动态更新的场景，但需要处理异步逻辑。

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