はじめに

Vue.js を kazupon/vue-i18n が動作しない問題の修正方法。

TL;DR

  • vue add i18n でプラグイン追加
  • 環境(バージョン組合せ?)によっては上手く動かないので src/i18n.js を修正
    • messages[locale] = locales(key).default -> messages[locale] = locales(key)
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. セットアップ
      1. ファイル修正
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$ sw_vers
ProductName:	macOS
ProductVersion:	11.2.2
BuildVersion:	20D80

$ node -v
v12.7.0

$ npm -v
6.14.5

$ vue -V
@vue/cli 4.4.6

$ npm ls vue vue-i18n
├── vue@2.6.12
├── vue-cli-plugin-i18n@2.0.1
└── vue-i18n@8.24.1

詳細

リポジトリ: 17number/vue-i18n-test

セットアップ

Vue CLI の vue create でプロジェクト作成。

1
2
3
4
5
6
7
$ vue create vue-i18n-test
Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project:
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM

vue add i18n で kazupon/vue-i18n を追加。

1
2
3
4
5
6
7
8
9
$ vue add i18n
📦  Installing vue-cli-plugin-i18n...
...
? The locale of project localization. ja
? The fallback locale of project localization. en
? The directory where store localization messages of project. It's stored under `src` directory. locales
? Enable locale messages in Single file components ? Yes
...
✔  Successfully invoked generator for plugin: vue-cli-plugin-i18n

これで $t('message') とすると、locales/xx.json にかかれている内容が参照される。

…はずなんだけど、どうもバージョンの組合せ問題(?)なのか上手くうごかなかった。

ファイル修正

プラグイン追加すると src/i18n.js が作成されるのだが、どうも loadLocaleMessages が上手く機能してないっぽい。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

function loadLocaleMessages () {
  const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
  const messages = {}
  locales.keys().forEach(key => {
    const matched = key.match(/([A-Za-z0-9-_]+)\./i)
    if (matched && matched.length > 1) {
      const locale = matched[1]
      messages[locale] = locales(key).default
    }
  })
  return messages
}

export default new VueI18n({
  locale: process.env.VUE_APP_I18N_LOCALE || 'en',
  fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
  messages: loadLocaleMessages()
})

挙動を追ったところ、 messages[locale] = locales(key).default が undefined になっているのが原因なので、以下のように修正する。

1
2
3
4
5
6
7
8
9
10
11
12
13
 function loadLocaleMessages () {
   const locales = require.context('./locales', true, /[A-Za-z0-9-_,\s]+\.json$/i)
   const messages = {}
   locales.keys().forEach(key => {
     const matched = key.match(/([A-Za-z0-9-_]+)\./i)
     if (matched && matched.length > 1) {
       const locale = matched[1]
-      messages[locale] = locales(key).default
+      messages[locale] = locales(key)
     }
   })
   return messages
 }

これで $t('message') や $t('hello.world', { world: '世界' }) などが動作するようになった。

まとめ

  • vue add i18n でプラグイン追加
  • 環境(バージョン組合せ?)によっては上手く動かないので src/i18n.js を修正
    • messages[locale] = locales(key).default -> messages[locale] = locales(key)

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list