Vue升级至2.6.11后出现$vuetify.breakpoint未定义错误求助

问题背景 #

将Vue从2.5.19版本升级到2.6.11后，出现$vuetify未定义及后续连锁错误，疑问是否有核心功能被移除。

错误详情 #

vue.runtime.esm.js:619 [Vue warn]: Property or method "$vuetify" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

found in

---> <Dialog> at node_modules/@my/vue-components/src/components/Dialog/Dialog.vue
       <Header> at src/modules/mapapp/components/Header/Header.vue
         <DashboardLayout> at src/layouts/DashboardLayout.vue
           <App> at src/App.vue
             <Root>

vue.runtime.esm.js:619 [Vue warn]: Error in render: "TypeError: Cannot read properties of undefined (reading 'breakpoint')"

found in

---> <Dialog> at node_modules/@my/vue-components/src/components/Dialog/Dialog.vue
       <Header> at src/modules/mapapp/components/Header/Header.vue
         <DashboardLayout> at src/layouts/DashboardLayout.vue
           <App> at src/App.vue
             <Root>

vue.runtime.esm.js:1888 TypeError: Cannot read properties of undefined (reading 'breakpoint')
at Proxy.render (Dialog.vue:16:1)
at Vue._render (vue.runtime.esm.js:3548:1)
at VueComponent.updateComponent (vue.runtime.esm.js:4066:1)
at Watcher.get (vue.runtime.esm.js:4479:1)

Dialog.vue:103 Uncaught TypeError: Cannot read properties of undefined (reading 'clientHeight')
at VueComponent.setScrollStyles (Dialog.vue:103:1)
at Dialog.vue:95:1

问题代码片段 #

<template>
  <v-layout
    row
    justify-center>
    <v-dialog
      :value="dialogOpen"
      scrollable
      persistent
      :fullscreen="$vuetify.breakpoint.xsOnly"
      max-width="600px">
      <v-card class="modal-content" style="align-items:flex-start!important;">

项目package.json配置 #

{
  "name": "myapp",
  "version": "1.1.7",
  "private": true,
  "scripts": {
    "serve": "./serve.sh",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit --no-cache"
  },
  "dependencies": {
    "@my/vue-components": "0.1.230",
    "@vue/eslint-config-airbnb": "^4.0.1",
    "axios": "0.21.2",
    "babel-polyfill": "6.26.0",
    "core-util-is": "^1.0.2",
    "lodash": "^4.17.15",
    "moment": "2.29.2",
    "vue": "2.6.11",
    "vue-cookies": "^1.5.13",
    "vue-i18n": "8.15.1",
    "vue-router": "3.1.3",
    "vue-template-compiler": "2.6.11",
    "vuelidate": "0.7.4",
    "vuetify": "1.2.1",
    "vuex": "3.0.1"
  },
  "devDependencies": {
    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
    "@babel/polyfill": "^7.7.0",
    "@babel/preset-env": "^7.7.7",
    "@kazupon/vue-i18n-loader": "^0.3.0",
    "@vue/cli-plugin-babel": "^4.2.0",
    "@vue/cli-plugin-eslint": "^4.2.0",
    "@vue/cli-plugin-unit-jest": "^4.2.0",
    "@vue/cli-service": "^4.2.0",
    "@vue/test-utils": "^1.0.0-beta.29",
    "babel-core": "^7.0.0-bridge.0",
    "babel-eslint": "^8.2.6",
    "babel-jest": "^23.0.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "html-loader": "^0.5.5",
    "jest-raw-loader": "^1.0.1",
    "lint-staged": "^7.3.0",
    "raw-loader": "^3.1.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.2",
    "vue-cli-plugin-i18n": "^0.6.1",
    "vue-cli-plugin-vuetify": "^0.6.3",
    "vue-loader": "^15.8.3",
    "vue-template-compiler": "2.6.11",
    "handlebars": "4.5.0"
  }
}

原因分析 #

1. Vue版本升级未移除$vuetify相关功能：$vuetify是Vuetify框架注入的全局属性，Vue 2.5到2.6属于小版本迭代，未对第三方框架全局属性注入做破坏性修改。
2. Vuetify版本兼容性问题：当前使用的Vuetify 1.2.1发布于Vue 2.6之前，未适配Vue 2.6的实例初始化逻辑，导致$vuetify无法正确注入组件上下文。
3. 第三方组件库依赖失效：@my/vue-components的Dialog组件直接依赖全局$vuetify对象，当全局注入失效时，组件无法获取该属性，进而引发连锁错误（如breakpoint、clientHeight读取失败）。

解决办法 #

1. 升级Vuetify到兼容Vue 2.6的版本 #

Vuetify 1.5.x系列全面支持Vue 2.6，执行以下命令升级：

npm install vuetify@1.5.24 --save

升级后确保main.js中Vuetify初始化逻辑正确：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

const vuetify = new Vuetify({
  // 自定义配置（如主题、断点等）
})

new Vue({
  vuetify,
  render: h => h(App)
}).$mount('#app')

2. 修复第三方组件库的$vuetify依赖 #

若无法升级组件库，可通过以下方式临时修复Dialog组件：

• 方式一：手动注入$vuetify
  修改Dialog.vue的脚本部分，添加计算属性获取全局$vuetify：

  export default {
    // ...其他配置
    computed: {
      $vuetify() {
        return this.$root.$vuetify
      }
    }
  }
  

• 方式二：父组件传递依赖值
  父组件中计算fullscreen状态并传递给Dialog组件：

  <!-- 父组件模板 -->
  <Dialog :fullscreen="$vuetify.breakpoint.xsOnly" />
  

  在Dialog组件中添加props接收：

  export default {
    props: {
      fullscreen: {
        type: Boolean,
        default: false
      }
    }
  }
  

  并修改模板中的:fullscreen="$vuetify.breakpoint.xsOnly"为:fullscreen="fullscreen"。

3. 升级第三方组件库 #

检查@my/vue-components是否有支持Vue 2.6的版本，执行升级命令：

npm install @my/vue-components@latest --save

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