如何将外部JavaScript文件中的变量引入index.pug并使用？

你遇到的报错本质是服务端渲染和客户端代码的执行时机不匹配：

• Pug的each循环是在服务端渲染模板的时候执行的，这时候服务端根本不知道你通过script include嵌入的客户端JS里的headArr变量——因为这段JS要等页面发送到浏览器后才会执行。
• 服务端渲染时找不到headArr，自然就会抛出“无法读取length”的错误。

方案1：在服务端渲染时使用这个数组（推荐，适合静态列表） #

如果这个列表是页面加载时就固定要渲染的，最好让服务端拿到headArr变量，再传给Pug模板：

1. 修改myscript.js，把数组导出为模块：

// myscript.js
module.exports = {
  headArr: ['id','firstname','lastname','company','salary']
};

2. 在你的服务端代码（比如Express）里，引入这个模块并把数组作为模板变量传递：

// 假设是Express服务端代码
const express = require('express');
const app = express();
const myScriptData = require('./public/script/myscript.js'); // 路径根据你的项目结构调整

app.set('view engine', 'pug');

app.get('/', (req, res) => {
  // 把headArr传给Pug模板
  res.render('index', { headArr: myScriptData.headArr });
});

3. 然后Pug模板里直接用each循环就行（不需要再用script include引入这个JS，除非你客户端还要用它）：

ul
  each val in headArr
    li= val

方案2：在客户端动态生成列表（适合需要动态更新的场景） #

如果这个数组是客户端动态生成的，或者你想让浏览器来渲染列表，那可以用客户端JS操作DOM：

1. Pug模板里先留一个空的列表容器，同时保留script include：

script include ../public/script/myscript.js
ul#headList

2. 修改myscript.js，添加DOM生成逻辑：

// myscript.js
const headArr = ['id','firstname','lastname','company','salary'];
// 拿到列表容器
const listContainer = document.getElementById('headList');
// 遍历数组生成li元素
headArr.forEach(val => {
  const listItem = document.createElement('li');
  listItem.textContent = val;
  listContainer.appendChild(listItem);
});

这样页面加载后，客户端JS会自动把列表渲染出来，不会有服务端找不到变量的问题。

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