Vue.js中HTML调用外部JS脚本报错：ReferenceError: NbRequest未定义

嘿，我来帮你搞定这个报错！这个问题通常是因为你的Vue代码在调用NbRequest时，这个方法还没被加载到全局环境里，或者根本没正确暴露出来。下面是几个最常见的解决方案：

1. 确保脚本加载顺序正确 #

Vue实例的脚本必须在包含NbRequest的JS文件和Vue本身之后加载。浏览器是按脚本标签的顺序解析代码的，如果你的Vue代码先跑了，那时候NbRequest还没被定义，自然会报错。

举个正确的加载顺序示例：

<!-- 第一步：加载包含NbRequest的外部JS文件 -->
<script src="./path/to/your/nb-request.js"></script>

<!-- 第二步：加载Vue库 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<!-- 第三步：编写你的Vue实例代码 -->
<div id="PRISME_data">
  Le nombre de requête est de : {{ nb_request }}<br>
  <button v-on:click="change">change</button>
</div>

<script>
let app = new Vue({
  el: '#PRISME_data',
  data() {
    return {
      nb_request: 0
    }
  },
  methods: {
    change() {
      // 现在可以安全调用NbRequest了
      this.nb_request = NbRequest();
    }
  }
})
</script>

2. 确保NbRequest被全局暴露 #

如果你的NbRequest是写在模块化的JS文件里（比如用了export），普通的脚本标签是无法直接访问它的。你需要把它挂载到window对象上，让它成为全局变量：

在你的外部JS文件（比如nb-request.js）里修改：

// 你的原始NbRequest方法
function NbRequest() {
  // 这里是你的数据加载逻辑，比如返回请求数量
  return fetch('/api/request-count')
    .then(res => res.json())
    .catch(err => {
      console.error('加载数据失败:', err);
      return 0;
    });
}

// 将方法暴露到全局window对象
window.NbRequest = NbRequest;

如果是用ES模块（import/export），那需要把Vue实例的脚本标记为type="module"，并通过import引入方法：

<div id="PRISME_data">
  Le nombre de requête est de : {{ nb_request }}<br>
  <button v-on:click="change">change</button>
</div>

<script type="module">
// 引入NbRequest和Vue
import { NbRequest } from './nb-request.js';
import Vue from 'https://cdn.jsdelivr.net/npm/vue@2/dist/vue.esm.browser.js';

let app = new Vue({
  el: '#PRISME_data',
  data() {
    return {
      nb_request: 0
    }
  },
  methods: {
    async change() {
      // 如果NbRequest是异步的，记得加async/await
      this.nb_request = await NbRequest();
    }
  }
})
</script>

3. 检查外部JS文件的路径是否正确 #

打开浏览器的开发者工具（F12），切换到Network标签，刷新页面后看看你的nb-request.js文件是否成功加载：

• 如果文件显示404，说明路径写错了，检查相对路径是否正确（比如是不是应该用../或者绝对路径）
• 如果加载成功，再确认文件里确实定义了NbRequest方法，没有拼写错误（注意大小写！）

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