如何将Pug模板中的服务器变量传递至外部JS文件？

针对你的需求，这里有几个实用的实现方式，解决你当前代码里因执行顺序导致变量无法被外部JS读取的问题：

方法一：调整脚本加载顺序（最直接） #

浏览器会按脚本出现的顺序执行代码，所以先定义全局变量，再加载外部JS，这样外部JS就能直接访问这个变量。

修改后的Pug代码：

html 
    head 

    body 
        // 先定义全局变量，把服务器变量赋值过来
        script.
            var serverVariable = "#{variableX}"
        // 再加载外部JS文件
        script(type='text/javascript' src='../api/public/javascript/dashboard.js')

在dashboard.js里直接使用这个全局变量：

// 直接访问全局变量
console.log(serverVariable);
// 后续业务逻辑里也能正常使用

方法二：用DOM自定义属性存储（更优雅，避免全局变量污染） #

把服务器变量存在DOM元素的自定义data-*属性里，外部JS通过DOM API读取，不污染全局作用域。

Pug代码：

html 
    head 
        // 可以正常在head里加载外部JS
        script(type='text/javascript' src='../api/public/javascript/dashboard.js')
    // 把变量存在body的自定义属性中
    body(data-server-variable="#{variableX}")

dashboard.js里的读取逻辑：

// 通过dataset读取自定义属性，自动转驼峰命名
const variableX = document.body.dataset.serverVariable;
// 或者用getAttribute方法
// const variableX = document.body.getAttribute('data-server-variable');
console.log(variableX);

方法三：通过初始化函数传递（适合复杂JS逻辑） #

如果你的外部JS有明确的初始化流程，可以定义一个初始化函数，在Pug中调用时直接传入服务器变量，这种方式可控性更强。

Pug代码：

html 
    head 
        script(type='text/javascript' src='../api/public/javascript/dashboard.js')
    body 
        script.
            // 调用外部JS的初始化函数，把变量传进去
            initDashboard("#{variableX}");

dashboard.js里的实现：

// 定义初始化函数，接收传入的变量
function initDashboard(variable) {
    console.log('从服务器拿到的变量：', variable);
    // 在这里编写依赖该变量的业务逻辑
}

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