Vue2+Vuetify项目单文件引入组件后v-icon等元素不显示且报rtl相关错误

问题原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'rtl')报错，核心原因是Vuetify实例没有正确注入Vue根实例。所有Vuetify组件都依赖全局挂载的$vuetify实例读取全局配置（包括排版方向、主题参数等），注入失败就会导致组件渲染异常、内置属性读取报错。

修复步骤 #

• 先确认你安装的是适配Vue2的Vuetify 2.x版本，Vuetify 3.x仅支持Vue3，版本不兼容也会触发同类问题。如果版本不对可执行命令重新安装：
  npm install vuetify@2.x
• 检查项目入口文件src/main.js的Vuetify注册逻辑，补全缺失的实例注入步骤，正确配置参考如下：

import Vue from 'vue'
import App from './App.vue'
// 引入Vuetify核心和默认样式
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
// 引入Material Design图标库，解决v-icon不显示的问题
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify)

// 实例化Vuetify，无特殊配置可留空
const vuetify = new Vuetify()

new Vue({
  vuetify, // 必须将vuetify实例传入根实例配置，是解决rtl报错的核心
  render: h => h(App)
}).$mount('#app')

• 如果执行完上述步骤后图标仍不显示，可单独安装图标依赖：
  npm install @mdi/font
• 你当前App.vue中所有Vuetify组件都放在<v-app>内部的写法是符合规范的，无需调整。

内容的提问来源于stack exchange，提问作者Shobhan Kumar.R