Vue3项目使用vue-resource报错：Object.defineProperties调用异常

错误信息 #

vue-resource.esm.js:1434 Uncaught TypeError: Object.defineProperties called on non-object
    at Function.defineProperties (<anonymous>)
    at plugin (vue-resource.esm.js:1434:10)
    at Object.use (runtime-core.esm-bundler.js:3755:11)
    at main.js?t=1688947032869:15:5

我的Vue代码 #

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'

import App from './App.vue'
import router from './router'
import resource from 'vue-resource'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(resource)

app.mount('#app')

package.json配置 #

{
  "name": "routing",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test:unit": "vitest",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },
  "dependencies": {
    "pinia": "^2.1.3",
    "vue": "^3.3.4",
    "vue-resource": "^1.5.3",
    "vue-router": "^4.2.2"
  },
  "devDependencies": {
    "@rushstack/eslint-patch": "^1.2.0",
    "@vitejs/plugin-vue": "^4.2.3",
    "@vitejs/plugin-vue-jsx": "^3.0.1",
    "@vue/eslint-config-prettier": "^7.1.0",
    "@vue/test-utils": "^2.3.2",
    "eslint": "^8.39.0",
    "eslint-plugin-vue": "^9.11.0",
    "jsdom": "^22.1.0",
    "prettier": "^2.8.8",
    "vite": "^4.3.9",
    "vitest": "^0.32.0"
  }
}

问题根源与解决方案 #

核心原因 #

vue-resource的最后稳定版本（1.5.3）发布于2018年，完全不支持Vue 3。它的插件逻辑基于Vue 2的全局API设计，而Vue 3的实例结构、插件注册机制与Vue 2差异极大，导致调用app.use(resource)时，插件内部尝试在非对象上执行Object.defineProperties，直接触发类型错误。

可行解决办法 #

1. 替换为Vue 3兼容的HTTP库（推荐）

放弃vue-resource，使用社区主流、支持Vue 3的HTTP工具，比如axios：

• 安装axios：

  npm install axios
  

• 全局挂载示例（main.js）：

  import axios from 'axios'
  const app = createApp(App)
  // 全局挂载后可在组件内通过this.$axios调用
  app.config.globalProperties.$axios = axios
  

• 组件内使用：

  async fetchData() {
    const response = await this.$axios.get('/your-api-url')
    // 处理响应数据
  }
  

2. 降级到Vue 2（不推荐）

如果一定要使用vue-resource，可以将Vue版本降级到2.x，同时确保vue-resource版本与Vue 2兼容。但这会失去Vue 3的组合式API、性能优化等核心特性，仅适用于维护旧项目的场景。

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