@ctrlzrposted at 2021-06-09

多言語化対応で、constの語句定義を置き換えたい

Q&A

Closed

I18n vuejs,

解決したいこと

vuejsの多言語化対応(i18n)で、jsの文言定義を置き換えたい

該当するソースコード

main.js

  import VueI18n from 'vue-i18n'
  Vue.use(VueI18n)

  const messages = {
   :
  }
  export const i18n = new VueI18n({
    locale: navigator.language.split('-')[0],
    fallbackLocale: 'ja',
    messages
  })

  new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>',
    store,
    i18n
  })

guestSearch.js

  import * as constants from '../constants'

  export default {
:
    headers: {
      id: { name: this.$t("message.GuestSearch.dataTable.headers.id") }
      search: { name: constants.SEARCH }

constants.js

  export const SEARCH = '検索' // ここで this.$t("message.GuestSearch.search") はエラー

自分で試したこと

guestSearch.js のthis.$t("message.GuestSearch.dataTable.headers.id") は多言語表示されますが、constants.js ではエラーになります。
guestSearch.js のidのように置き換えれば対応可能ですが、constants.SEARCH のように、constants.～があちこちで使用されているので、置き換えるのが大変です。

constants.js 自体を多言語化対応できれば、置き換える必要がなくなるので、方法を探しています。

stackoverflow に記載の方法は試しました。
https://stackoverflow.com/questions/65026546/how-to-import-i18n-in-vue-file

2Answer

@ctrlzr posted at 2021-06-10

constants.jsでmainのi18nをインポートは、jsの読み込み順序が逆なので、動きません。
（localデバッグで読み込み順序を確認）

0Like

@ctrlzr posted at 2021-06-10

constants.jsの定義をメッセージidにして対応することにしました。

constants.js
export const SEARCH = 'constants.search' // 大文字では変換が上手くいかないので小文字 ← これで３時間ハマり

guestSearch.js
import * as constants from '../constants'

export default {
:
headers: {
id: { name: this.$t("message.GuestSearch.dataTable.headers.id") }
search: { name: this.$t(constants.SEARCH) }