Node服务器运行页面时遇Uncaught ReferenceError: Verbatims未定义求助

咱们一步步拆解你的问题，核心原因是浏览器环境不支持Node.js的CommonJS模块语法，再加上代码里还有几个作用域相关的小坑，一起来修复：

1. 先搞定Verbatims类的全局暴露问题 #

你的verbatims.js用了module.exports = Verbatims;——这是Node专属的模块导出方式，但浏览器原生不认这个。直接在HTML里引入这个文件时，Verbatims类根本没被放到全局作用域里，浏览器自然找不到它。

修改verbatims.js，把类挂载到浏览器的全局window对象上：

class Verbatims { 
  list() { 
    return ["c'est super", "j'aime pas", "莽a marche bien"]; 
  } 
} 
// 替换原来的module.exports，把类暴露给浏览器全局
window.Verbatims = Verbatims;

2. 修复其他潜在的作用域问题 #

除了Verbatims的问题，你的代码里还有几个小细节会导致后续报错：

• ite变量找不到：直接写ite访问不到Vue实例里的ite，得通过实例对象或者this来获取
• 定时器无法清除：clearInterval()必须传入定时器的引用，不然等于白调用
• 全局函数的作用域混乱：把定时器逻辑放到Vue的methods里，既能避免全局污染，还能直接用this访问实例数据

修改后的HTML脚本部分可以改成这样：

<script>
let app = new Vue({
  el:'#PRISME_data',
  data: {
    nb_request: "toto",
    ite: 0,
    timer: null // 新增变量存定时器引用，方便后续清除
  },
  methods: {
    change: function() {
      this.startTimer();
    },
    stop: function() {
      clearInterval(this.timer);
    },
    startTimer: function() {
      // 先清除已有定时器，避免重复创建
      if(this.timer) clearInterval(this.timer);
      this.timer = setInterval(() => {
        // 用this访问实例里的ite数据
        let verbatim = new Verbatims().list()[this.ite];
        this.nb_request = verbatim; // 更新页面显示内容
        // 加个循环逻辑，防止数组越界
        this.ite = (this.ite + 1) % new Verbatims().list().length;
      }, 5000);
    }
  }
});
</script>

3. 验证修复效果 #

做完上面的修改后：

1. 重启你的Node服务器
2. 刷新页面，点击Change value按钮，应该能看到nb_request每隔5秒切换成verbatims.js里的文本，而且不会再出现Verbatims is not defined的报错了。

如果之后你需要用到更多Node风格的模块，可以考虑用Webpack、Vite这类打包工具转译代码，但目前这个场景下，直接挂载到window是最简单高效的解决方案。

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