能否通过Pug在前端JS文件中访问Node.js后端变量？

可以实现，但不能直接在外部JS文件中使用Pug的插值语法，这也是你报错的核心原因。

问题原因分析 #

• 内联script标签里的代码会经过Pug模板引擎编译：!{JSON.stringify(testVar)}会被替换成实际的JSON字符串，生成合法的JS代码，因此能正常运行。
• 外部JS文件是浏览器直接请求的静态资源，Node会直接返回文件原内容，浏览器解析时!{JSON.stringify(testVar)}属于非法JS语法，所以抛出Uncaught SyntaxError: missing : after property id错误。

解决方案 #

方案1：将变量挂载到全局对象（最简便）

修改Pug模板，在引入外部JS前添加内联脚本，把后端变量挂载到window全局对象：

h1 #{testVar.title}
div #{testVar.string}

//- 先把后端变量挂载到全局
script.
    window.testVar = !{JSON.stringify(testVar)};
//- 再引入外部JS文件
script(src="/javascripts/test.js")

修改外部test.js，直接读取全局变量：

console.log(testVar.title);
console.log(testVar.string);

方案2：通过HTML data属性传递（更优雅，避免全局污染）

在Pug模板的根元素上设置data-*属性存储变量：

div(id="app-root" data-test-var=JSON.stringify(testVar))
h1 #{testVar.title}
div #{testVar.string}

script(src="/javascripts/test.js")

在test.js中读取data属性并解析：

const appRoot = document.getElementById('app-root');
const testVar = JSON.parse(appRoot.dataset.testVar);
console.log(testVar.title);
console.log(testVar.string);

方案3：动态渲染外部JS（不推荐，仅特殊场景使用）

把外部JS改成由Pug渲染的动态资源，需要新增路由处理：

1. 新增路由：

router.get("/javascripts/test.js", function(req, res) {
  const testVar = {
    title: "Test Title",
    string: "Test string"
  };
  // 设置响应头为JS类型
  res.set('Content-Type', 'application/javascript');
  // 用Pug渲染JS模板
  res.render("test-js", { testVar: testVar });
});

2. 创建test-js.pug模板文件：

var object = !{JSON.stringify(testVar)};
console.log(object.title);
console.log(object.string);

此方法会让静态JS文件走路由渲染，影响性能且易出现缓存问题，一般不建议使用。

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