Vue3组合式API中Vuexy模板自动导入i18n失效求助

问题根源 #

你遇到的问题是生成auto-imports.d.ts的unplugin-auto-import插件，未正确配置vue-i18n的自动导入规则，或是TypeScript未识别到自动生成的声明文件。

具体解决步骤 #

1. 检查并修改自动导入配置 #

找到项目根目录的vite.config.ts（webpack项目则找vue.config.js），定位unplugin-auto-import的配置项，确保vue-i18n的相关API被加入导入列表：

import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',
        'vue-router',
        // 明确添加vue-i18n需要自动导入的API
        {
          'vue-i18n': ['useI18n', 't', '$t']
        }
      ],
      dts: true, // 确保自动生成auto-imports.d.ts
      vueTemplate: true // 开启后模板中可直接使用$t
    })
  ]
})

2. 验证auto-imports.d.ts的内容 #

打开项目根目录的auto-imports.d.ts，确认包含vue-i18n的声明：

declare const t: typeof import('vue-i18n')['t']
declare const $t: typeof import('vue-i18n')['$t']
declare const useI18n: typeof import('vue-i18n')['useI18n']

如果没有，重启开发服务让插件重新生成该文件。

3. 确保TypeScript识别声明文件 #

打开tsconfig.json，检查include数组是否包含auto-imports.d.ts：

{
  "include": [
    "src/**/*",
    "auto-imports.d.ts"
  ]
}

4. 测试配置效果 #

重启开发服务后，在组件中直接使用自动导入的API：

<script setup lang="ts">
console.log(t('users.all'))
</script>

<template>
  <div>{{ $t('users.all') }}</div>
</template>

额外说明 #

如果Vuexy模板自带预设的auto-import配置，可能需要找到模板专属的配置文件（比如src/config/auto-import.ts这类路径），在原有配置基础上添加vue-i18n的导入规则，而非直接修改根目录的vite配置。

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