t('xxx.xxx')のまま表示される？ Vue i18nのトラブルシュート

i18n導入時にハマったVueの落とし穴メモ

Vue.js（Node.js + Vite環境）で多言語対応を実装した際に、実際に躓いたポイントのメモです。
※以下、解決していない事がありますので、あくまでメモでございます！

PCブラウザで表示する場合は、ネット上の情報を参考にすれば問題なく動作しましたが、スマホで確認すると i18n の定義ファイルが読み込まれておらず、t('xx.xxx') のようなスクリプトそのままで表示されてしまう、という問題に直面しました。

以下、特に気をつけるべきポイントを2つ記載します。

---

① 定義ファイルはネスト不可

可読性を高めるために、以下のように機能ごとにオブジェクトを分けてネストして定義しようとしました：

// NGな例
export default {
  common: {
    submit: '送信',
    cancel: 'キャンセル',
  },
  error: {
    required: '必須項目です',
  },
}

しかし、このような構成ではスマホ環境で読み込まれず、i18nが機能しないケースがありました。
対策として、フラットに定義することで解消しました。

// OKな例
export default {
  'common.submit': '送信',
  'common.cancel': 'キャンセル',
  'error.required': '必須項目です',
}

② 引数は使えない？

i18nの定義内で引数を使って、動的に文言を差し込みたいケースがあります。
開発環境（Vite）では以下のような定義でも正常に動作します：

// 例：定義ファイル
export default {
  'greeting': 'こんにちは、{name}さん！',
}

// 使用側
t('greeting', { name: 'マスター' })

しかし、本番環境にデプロイすると定義が読み込まれなくなる現象が発生（PC・スマホともに）。
現時点では原因不明ですが、静的なテキストのみを使用するように修正することで回避しました。
(解決ではないですが…）

以上、同じような構成・環境でi18nを導入しようとしている方の参考になれば幸いです。
もしここまでお読みの方で、②の解決策ご存知でしたら教えてください；；