Vue I18n全局注入后无法解析i18n-t组件与v-t指令问题

问题核心 #

你开启了globalInjection: true且legacy: false（Composition API模式），但这个配置仅会全局注入$t、$tc这类方法，不会自动注册<i18n-t>组件和v-t指令——这是Vue I18n v9+ Composition API模式的设计逻辑，和你是否调用useI18n()无关。

解决方案 #

1. 全局注册<i18n-t>组件和v-t指令

修改你的./utils/i18n/index.js，从vue-i18n导入对应的组件和指令，结合Vue实例完成全局注册：

// ./utils/i18n/index.js
import { createI18n, I18nT, VT } from 'vue-i18n';

// 调整setupI18n方法，接收Vue实例作为参数
export const setupI18n = (app) => {
  const defaultLocale = config.locales.default.toLowerCase();

  const i18n = createI18n({
    fallbackLocale: defaultLocale,
    legacy: false,
    globalInjection: true
  });

  // 全局注册i18n-t组件和v-t指令
  app.component('i18n-t', I18nT);
  app.directive('t', VT);

  loadLocaleTranslations(i18n, defaultLocale);
  setLocale(i18n, getLocale());
  registerI18nMiddleware(i18n, router);

  window.onlanguagechange = () => {
    setLocale(i18n, getLocaleFromBrowser() ?? getLocale());
  };

  return i18n;
};

同步修改app.js，传入Vue实例：

// app.js
import { createApp } from 'vue';
import App from './App.vue';
import { setupI18n } from './utils/i18n/index.js';

const app = createApp(App);
const i18n = setupI18n(app);
app.use(i18n);

app.mount('#app');

2. （可选）Webpack配置支持SFC的<i18n>块

如果你在单文件组件中使用了<i18n>标签定义局部翻译，需要额外配置Webpack处理这类自定义块：

• 先安装依赖：

  npm install @intlify/vue-i18n-loader --save-dev
  

• 修改Webpack配置，在module.rules中添加Vue文件的i18n块处理规则：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.vue$/,
          loader: 'vue-loader',
          options: {
            customBlocks: {
              i18n: {
                loader: '@intlify/vue-i18n-loader'
              }
            }
          }
        }
      ]
    }
  };
  

验证 #

完成配置后，即可在SFC中直接使用目标组件和指令：

<template>
  <!-- 使用i18n-t组件 -->
  <i18n-t keypath="views.home.body.some_key" />
  
  <!-- 使用v-t指令 -->
  <div v-t="'views.home.body.some_key'"></div>
</template>

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