Vue3+Quasar非CLI环境下vue-i18n使用问题求助

解决思路 #

一、修复<script setup>中$t无法识别的问题 #

你开启了vue-i18n的legacy: false（Composition API模式），该模式下全局注入的$t不会自动暴露到<script setup>作用域中，需手动使用组合式函数：

1. 在组件的<script setup>中导入useI18n并解构出t方法：

import { useI18n } from 'vue-i18n'

const { t } = useI18n()

2. 替换原有的$t调用：

console.log('Testoutput', t('username'))

额外修复：你的loadLocaleMessages函数存在变量提升问题，语言文件导入语句放在函数定义之后会导致en、de未定义，需调整顺序：

// 先导入语言文件
import en from './locales/en.json'
import de from './locales/de.json'

// 再定义加载函数
function loadLocaleMessages() {
    const messages = {}
    // 简化写法，避免原逻辑的潜在问题
    messages.en = en
    messages.de = de
    return messages
}

// 最后创建i18n实例
const i18n = createI18n({
    locale: 'de',
    fallbackLocale: 'en',
    messages: loadLocaleMessages(),
    legacy: false,
    globalInjection: true
})

二、实现Quasar组件本地化 #

Quasar拥有独立的国际化系统，需要将vue-i18n实例与Quasar的i18n插件关联：

1. 导入并注册Quasar的I18n插件：

import { Quasar, I18n } from 'quasar'

// 在注册Quasar时配置插件
app.use(Quasar, {
    plugins: { I18n },
    // 将vue-i18n的全局实例传给Quasar
    i18n: i18n.global
})

2. 合并Quasar官方语言包到你的翻译文件中：
   Quasar内置组件需要特定翻译键，可直接导入官方语言包合并：

import enQuasar from 'quasar/lang/en-US'
import deQuasar from 'quasar/lang/de'

function loadLocaleMessages() {
    // 合并自定义翻译与Quasar官方翻译
    const messages = {
        en: { ...enQuasar, ...en },
        de: { ...deQuasar, ...de }
    }
    return messages
}

这样Quasar组件（如日期选择器、表单验证提示等）就能自动使用当前locale的翻译内容。

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