解决Vue3+vue-i18n中$i18next未定义及渲染函数错误

一、修复vue-i18n核心配置错误 #

1. 修正i18n.js的语言包字段 #

vue-i18n v9+版本中，存储语言包的字段是messages而非translations，修改i18n.js：

import { createI18n } from "vue-i18n";
import en from "./public/locales/en.json"
import fr from "./public/locales/fr.json"

export default createI18n({
  locale: 'en',
  fallbackLocale: 'fr',
  globalInjection: true,
  legacy: false,
  messages: { // 替换translations为messages
    en,
    fr
  }
});

2. 替换模板中的$i18next为$i18n #

在legacy: false（Composition API模式）下，vue-i18n全局注入的实例是$i18n，而非$i18next，修改App.vue的模板部分：

<select v-model="$i18n.locale">
  <option v-for="(lng, i) in Object.keys(languages)" :key="`Lang${i}`" :value="lng">
    <p v-if="$i18n.locale !== lng"> <!-- 替换$i18next.locale为$i18n.locale -->
      {{ languages[lng].nativeName }}
    </p>
    <strong v-if="$i18n.locale === lng"> <!-- 同上 -->
      {{ languages[lng].nativeName }}
    </strong>
  </option>
</select>

二、修复$t('homeDescr')失效问题 #

你的en.json中homeDescr嵌套在translation对象下，需要使用完整的key路径：
修改HomeSub.vue的模板：

<h1>{{ $t('translation.homeDescr') }}</h1>

三、解决Vue生产环境Feature Flag警告 #

在webpack配置文件中添加DefinePlugin，注入缺失的feature flag：

const webpack = require('webpack');

module.exports = {
  // ...其他配置
  plugins: [
    new webpack.DefinePlugin({
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false)
    })
  ]
};

若使用Vite，在vite.config.js中配置：

export default defineConfig({
  define: {
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
  }
})

四、其他优化建议 #

• 修改组件name：HomeSub.vue的name与App.vue重复，改成HomeSub避免混淆：

export default {
  setup() {
    const { t } = useI18n()
    return { t }
  },
  name: 'HomeSub' // 替换原有的TranslationComponent
}

完成以上修改后，语言切换下拉菜单可正常工作，翻译功能恢复，生产环境警告也会消除。

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