如何将变量从Pug模板文件传递到外部脚本文件？

嘿，我之前也碰到过一模一样的问题！外部JS文件没法直接访问模板里的locals变量，本质原因是两者运行的上下文完全不同——模板是在服务器端渲染时处理的，而外部脚本是浏览器加载后在客户端执行的，自然拿不到服务器端的变量。给你几个实用的解决办法：

方法1：把变量挂载到全局window对象（最直接） #

在你的Pug模板里，在引入外部JS之前，先把locals变量序列化成JSON并挂载到window上，这样外部脚本就能访问到了：

// 在Pug模板中添加这段脚本
script.
  // 用!{...}来直接输出序列化后的JSON，避免转义问题
  window.appLocals = !{JSON.stringify(locals)};

// 然后再引入你的外部脚本
script(src='/file/Index.js')

之后在Index.js里，就可以直接通过window.appLocals（或者直接写appLocals）来使用变量了：

// Index.js里的代码
console.log(appLocals); // 直接访问全局变量

注意：如果locals里包含函数、循环引用或者其他不能被JSON序列化的内容，JSON.stringify会报错。这时候建议只序列化你实际需要的字段，比如!{JSON.stringify({ user: locals.user, config: locals.config })}。

方法2：通过DOM属性传递（更优雅，不污染全局） #

如果只是需要传递少量变量，或者不想污染全局作用域，可以把变量存在某个DOM元素的自定义属性里，然后外部JS去读取：

// 在Pug模板里给根元素添加data属性
div(id='app-container' data-app-locals=JSON.stringify(locals))

script(src='/file/Index.js')

然后在Index.js里读取这个属性并解析：

// Index.js里的代码
const appContainer = document.getElementById('app-container');
const appLocals = JSON.parse(appContainer.dataset.appLocals);
console.log(appLocals);

这种方式更符合前端开发的最佳实践，不会给全局作用域添乱。

方法3：通过AJAX请求获取（适合敏感数据） #

如果你的locals里包含敏感信息，不想直接暴露在HTML源码里，可以在后端加一个接口来返回数据，然后外部JS发起请求获取：
首先在Express里新增一个路由：

// Express后端代码
app.get('/api/app-locals', (req, res) => {
  // 在这里可以过滤掉敏感数据，只返回需要的内容
  const safeLocals = {
    userName: req.locals.userName,
    appConfig: req.locals.appConfig
  };
  res.json(safeLocals);
});

然后在Index.js里用fetch请求这个接口：

// Index.js里的代码
fetch('/api/app-locals')
  .then(response => response.json())
  .then(locals => {
    // 在这里使用获取到的变量
    console.log(locals.userName);
  })
  .catch(err => console.error('获取数据失败:', err));

这种方式更安全，但会多一次HTTP请求，适合数据敏感或者内容比较大的场景。

内容的提问来源于stack exchange，提问作者Pol.H