Vue.js路由提示Property '$keycloak' does not exist on type 'Vue'如何解决？

你遇到的两个现象分别对应两个独立问题：

• 类型报错是TypeScript识别不到Vue原型上的$keycloak属性导致的：$keycloak是你通过keycloak插件挂载到Vue原型上的全局属性，TypeScript默认的Vue类型定义里没有包含这个属性，所以会抛出类型错误，实际运行时原型上存在该属性，因此代码可以正常执行。
• 打印router.app看不到$keycloak是挂载时机和控制台打印机制共同导致的：router.app是路由绑定的根Vue实例，你在路由守卫中打印时，keycloak插件可能还没完成挂载初始化；同时浏览器控制台打印引用类型时只会展示打印瞬间的对象快照，你展开对象时才会加载最新属性，因此会出现肉眼看不到属性但实际调用可以取到值的情况。

1. 解决类型报错 #

在项目src目录下新增类型声明文件keycloak.d.ts，写入以下内容扩展Vue的类型定义：

import Vue from 'vue'
import type Keycloak from 'keycloak-js'

declare module 'vue/types/vue' {
  interface Vue {
    $keycloak: Keycloak
  }
}

写完后重启TS服务，类型报错就会消失。

2. 优化取值逻辑避免时序问题 #

你当前直接通过router.app.$keycloak取值的写法依赖实例挂载时序，极端情况下会出现取值为undefined的问题，建议做以下优化：

• 把Keycloak初始化后的实例单独抽成独立模块导出，路由守卫中直接引入该实例使用，不需要依赖router.app
• 或将Vue实例挂载、路由初始化的逻辑放在Keycloak初始化完成的回调中，确保路由守卫执行时$keycloak已经完成挂载

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