VueJS项目中this.$vuetify.breakpoint为空无法使用的问题求助

你遇到的问题核心在于Vuetify 1.x的初始化方式不正确，导致this.$vuetify没有被完整初始化，所以breakpoint属性为空。

在Vuetify 1.x版本中，仅仅通过Vue.use(Vuetify, options)全局注册插件是不够的——你需要显式创建一个Vuetify实例，并将其传递给根Vue实例，这样才能让$vuetify包含breakpoint这类核心功能模块。

修改你的main.ts代码： #

import './hooks' // This must be imported before any component
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import '@mdi/font/css/materialdesignicons.min.css'
import 'roboto-fontface/css/roboto/roboto-fontface.css'
import './styles/global.css'
import App from './App.vue'
import router from './router'

// 先全局注册Vuetify插件，无需在此传入主题配置
Vue.use(Vuetify)

// 创建Vuetify实例，传入你的主题自定义配置
const vuetify = new Vuetify({
  theme: {
    primary: '#0031FF',
    secondary: '#424242'
  }
})

// tslint:disable-next-line:no-unused-expression
new Vue({
  router,
  vuetify, // 关键步骤：将Vuetify实例传入根Vue实例
  render: (h) => h(App)
}).$mount('#app')

为什么这样能解决问题？ #

你原来的代码里，Vue.use(Vuetify, { theme: ... })只是全局注册了Vuetify的组件和指令，但并没有初始化Vuetify的核心实例（包含breakpoint、主题状态管理等关键模块）。只有当你把创建好的Vuetify实例传递给根Vue实例后，this.$vuetify才会被正确注入到所有子组件中，这时breakpoint属性就能正常访问了。

另外补充一点：建议在组件的mounted钩子或之后的生命周期中访问this.$vuetify.breakpoint，因为断点检测需要等组件挂载完成后，才能获取到正确的窗口尺寸信息。

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