PhpStorm调用Nuxt自定义插件时提示未解析变量$repositories如何解决

方法一：全局类型声明（推荐，全项目生效） #

• 第一步：在项目根目录新建vue.d.ts类型声明文件，内容如下：

import Vue from 'vue'

// 可根据你实际的Repository结构补全更精准的类型
interface RepositoryInstance {
  // 这里可以自定义你的仓库实例包含的方法，比如list、get、create等
  list: () => Promise<any>
  get: (id: number) => Promise<any>
  [key: string]: any
}

interface Repositories {
  categories: RepositoryInstance
  mediaObjects: RepositoryInstance
  // 其他仓库可在此处继续追加
}

// 扩展Vue实例类型，支持this.$repositories识别
declare module 'vue/types/vue' {
  interface Vue {
    $repositories: Repositories
  }
}

// 如需在asyncData等场景下通过ctx.$repositories调用，可追加以下声明
declare module '@nuxt/types' {
  interface Context {
    $repositories: Repositories
  }
}

如果声明文件提示找不到@nuxt/types模块，可执行npm i @nuxt/types -D安装类型依赖后重试。

• 第二步：配置PhpStorm识别规则
  • 打开File > Settings > Languages & Frameworks > JavaScript > Libraries，确保项目依赖的vue、@nuxt/types相关库已被勾选
  • 进入File > Settings > Languages & Frameworks > TypeScript，勾选Enable TypeScript compiler和Allow JavaScript files，即使是纯JS项目也可开启，用于识别声明文件
  • 若声明文件未被自动识别，右键点击vue.d.ts，选择Mark as TypeScript Declaration File
• 第三步：重启IDE生效，右键项目根目录选择Invalidate Caches > Invalidate and Restart，等待PhpStorm重新索引项目即可

方法二：单组件JSDoc声明（无需TS，仅当前组件生效） #

在对应组件的script标签顶部添加如下JSDoc注释即可：

/**
 * @typedef {Object} RepositoryInstance
 * @property {Function} list
 * @property {Function} get
 * 可根据实际方法继续补充
 */

/**
 * @typedef {Object} Repositories
 * @property {RepositoryInstance} categories
 * @property {RepositoryInstance} mediaObjects
 */

/**
 * @this {{$repositories: Repositories}}
 */
export default {
  // 你的组件业务代码
}

注意：你当前贴出的plugins/repository.js里的repositories对象仅配置了categories，如果实际需要调用this.$repositories.mediaObjects，请先确认你已经在该对象中添加了mediaObjects的对应配置，避免运行时报错。

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