Nuxt+TypeScript自定义根注入插件运行时报函数不存在问题求助

核心根因 #

你把Nuxt插件的注册路径错误写到了tsconfig.json的plugins字段中，这个字段是用来配置TypeScript编译器插件的，Nuxt并不会读取这个字段加载自定义插件，因此你写的plugins/ageGroups.ts代码根本没有被执行，运行时Vue原型上自然不存在$getAgeGroup方法。而你写的TypeScript类型声明仅作用于编译时校验，所以编码和编译阶段都不会报错。

修复步骤 #

1. 移除tsconfig.json里的错误plugins配置项，删除下面这段代码：

"plugins": [
  "~/plugins/ageGroups.ts"
],

2. 打开项目根目录的nuxt.config.ts（或nuxt.config.js），在配置中加入plugins字段注册自定义插件：

export default defineNuxtConfig({
  // 其他已有配置保持不变
  plugins: [
    '~/plugins/ageGroups.ts'
  ]
})

3. 如果你使用的是Nuxt3，需要调整插件写法适配Nuxt3规则，不需要直接挂载Vue原型：
   修改plugins/ageGroups.ts代码如下：

const ageGroups = [
  'zeros',
  'teens',
  'twenties',
  'thirties',
  'fourties',
  'fifties',
  'sixties',
  'seventees',
  'eigthies',
  'nineties',
  'hundreds',
  'hundred-tens',
  'hundred-twenties',
] as const;

function getAgeGroup(val: number = 0) {
  if (val < 10) return ageGroups[0];
  if (val > 120) return ageGroups[11];
  val = Math.floor(val / 10);
  return ageGroups[val];
}

export default defineNuxtPlugin(() => {
  return {
    provide: {
      getAgeGroup
    }
  }
})

类型声明可以单独放到根目录types/index.d.ts文件中：

declare module '#app' {
  interface NuxtApp {
    $getAgeGroup(val: number): typeof ageGroups[number]
  }
}
export {}

其他排查点 #

• 若为Nuxt2项目，确认已安装@nuxt/types相关依赖，和现有项目的Vue版本匹配
• 修复配置后删除.nuxt缓存文件夹，重启本地开发服务
• 确认插件文件路径、文件名大小写和配置中保持完全一致

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