Vue 3 CLI报错：Cannot read properties of undefined (reading 'get')

错误现象 #

• 控制台抛出错误：

app.js:209 Uncaught TypeError: Cannot read properties of undefined (reading 'get')
    at Proxy.getTodos (Todos.vue?4897:38:1)
    at Proxy.mounted (Todos.vue?4897:28:1)
    at eval (runtime-core.esm-bundler.js?d2dd:2722:1)
    at callWithErrorHandling (runtime-core.esm-bundler.js?d2dd:155:1)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?d2dd:164:1)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js?d2dd:2697:1)
    at flushPostFlushCbs (runtime-core.esm-bundler.js?d2dd:341:1)
    at render (runtime-core.esm-bundler.js?d2dd:6247:1)
    at mount (runtime-core.esm-bundler.js?d2dd:4440:1)
    at app.mount (runtime-dom.esm-bundler.js?2725:1574:1)

• Vue DevTools中应用和组件列表为空
• Todos.vue模板能渲染"Hi there"，但无法加载待办事项列表

问题代码 #

Todos.vue #

<template>
    <div id="TODOS">
      Hi there
      <ol>
        <li v-for="todo in v_todos" :key="todo.id">
          <span style="color:red;">{{ todo.name }}</span>
        </li>
      </ol>
    </div>
  </template>
  
  <script>
  export default {
    // el: "#TODOS",
    name: 'Todos',
    
    data() {
      return {
        v_todos: [],
      }
    },
  
    computed: {},
    components: {},
  
    mounted() {
        this.getTodos();
    },
  
    methods: {
          getTodos: function () {
              this.$http.get('/api/todo/')
                  .then((response) => { 
                    this.v_todos = response.data; 
                })
                  .catch((err) => { 
                    console.log(err); 
                })
          },
  }
  </script>

App.vue #

<template>
    <div id="App">
      <Todos />
    </div>
    
  </template>
  
  <script>
  import Todos from './components/Todos.vue'
  
  export default {
    name: 'App',
    components: {
      Todos
    }
  }
  </script>

todos.html #

...
<div id="App"></div>
...

base.html（body末尾） #

<script type="text/javascript" src="{% static 'src/vue/dist/js/chunk-vendors.js' %}"></script>
  <script type="text/javascript" src="{% static 'src/vue/dist/js/app.js' %}"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.5"></script>

解决方案 #

1. 替换Vue Resource为Axios #

Vue 3不兼容Vue Resource，官方推荐用Axios实现HTTP请求：

• 安装Axios：在项目根目录执行命令

npm install axios

• 全局配置Axios（在项目入口文件main.js中）：

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const app = createApp(App)
// 全局挂载axios，组件内可通过this.$http调用
app.config.globalProperties.$http = axios
app.mount('#App')

• 若不想全局挂载，可直接在Todos.vue中导入使用：

// 在Todos.vue的script开头添加
import axios from 'axios'

// 修改getTodos方法
methods: {
  getTodos: function () {
      axios.get('/api/todo/')
          .then((response) => { 
            this.v_todos = response.data; 
        })
          .catch((err) => { 
            console.log(err); 
        })
  },
}

2. 修复Vue DevTools空白问题 #

• 确保浏览器的Vue DevTools是支持Vue 3的最新版本
• 调整脚本加载顺序，删除无用的Vue Resource脚本，base.html中改为：

<script type="text/javascript" src="{% static 'src/vue/dist/js/chunk-vendors.js' %}"></script>
<script type="text/javascript" src="{% static 'src/vue/dist/js/app.js' %}"></script>

• 确认main.js中使用Vue 3的正确挂载方式：app.mount('#App')（而非Vue 2的new Vue({el: '#App'})）

3. 验证修复 #

重启Vue CLI开发服务，刷新页面后：

• 控制台不再抛出$http未定义的错误
• 待办事项列表应正常加载
• Vue DevTools中能看到应用和组件结构

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