Vue 3.0.7集成vue-resource 1.5.2时出现'Uncaught TypeError: window.Vue.use is not a function'错误的求助

核心原因 #

你遇到这个问题的根本原因是：vue-resource 1.5.2只支持Vue 2，完全不兼容Vue 3。Vue 3重构了全局API，移除了全局Vue.use()方法，转而使用通过Vue.createApp()创建的app实例上的app.use()方法，而vue-resource的源码还在调用旧的Vue 2全局API，所以才会触发报错。而且vue-resource已经多年没有更新（最后一次维护是2019年），Vue官方也早已不再推荐使用它。

解决方案：替换为Vue 3兼容的HTTP库 #

最稳妥的方案是放弃vue-resource，改用Vue官方推荐的HTTP工具，比如axios，下面是具体步骤：

1. 安装/引入axios

• 如果用npm管理依赖：

  npm install axios
  

• 如果用CDN引入（适配你的静态HTML场景），在index.html的script标签区域添加：

  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  

2. 修改你的请求代码

把原来使用this.$http的方法改成axios的写法：

// 组件methods中的onSubmit方法
onSubmit() {
  console.log("Search");
  let path = "/search?q=".concat(this.search);
  axios.get(path)
    .then(response => {
      console.log(response.data); // axios的响应数据存放在response.data中
    })
    .catch(error => {
      console.error("请求出错：", error);
    });
}

3. （可选）封装成全局$http方法（还原vue-resource的使用习惯）

如果你习惯用this.$http的写法，可以把axios封装成Vue 3的插件，这样就能在组件里继续使用熟悉的语法：

// 在public/script.js中添加插件逻辑
const httpPlugin = {
  install(app) {
    // 将axios挂载到Vue全局属性
    app.config.globalProperties.$http = axios;
  }
};

// 初始化Vue应用并使用插件
const app = Vue.createApp({
  data() {
    return {
      search: ''
    }
  },
  methods: {
    onSubmit() {
      console.log("Search");
      let path = "/search?q=".concat(this.search);
      this.$http.get(path)
        .then(response => {
          console.log(response.data);
        })
        .catch(err => console.error(err));
    }
  }
});

app.use(httpPlugin);
app.mount('#app'); // 记得挂载到你的根DOM元素，比如页面中的<div id="app"></div>

额外注意点 #

• 你当前引入的Vue 3全局构建版（vue.global.js），全局Vue对象上确实没有use方法，这是Vue 3的设计变化，所有插件都需要通过app.use()来注册，而非旧的全局Vue.use()。
• 不建议尝试修改vue-resource的源码来适配Vue 3，因为它的内部逻辑完全基于Vue 2的响应式系统和API，修改成本极高，远不如直接换用维护活跃的axios。

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