BETA

vue.jsで多言語対応する

投稿日:2019-06-07
最終更新:2019-06-07

おとなしくライブラリを使います
Vue i18n

$ npm install vue-i18n  

main.jsでi18n使うよ宣言

import VueI18n from 'vue-i18n'  
import { messages } from '@/common/lang/index.js' //多言語は別ファイルで管理する  
Vue.use(VueI18n)  
const i18n = new VueI18n({  
  locale: 'en',  
  messages: messages  
})  

common/lang/index.jsを作る
ここでは日英

import en from './messages_en'  
import jp from './messages_jp'  

var messages = Object.assign(en, jp)  

export { messages }  

各言語について、messages_XX.jsファイルを作って記述

export default {  
  ja: {  
    Hoge: {  
      descipriton: '日本語  
    }  
  }  
}  
export default {  
  en: {  
    Hoge: {  
      descipriton: 'English  
    }  
  }  
}  

実際に呼び出す時 (hogehoge.vue)
この{{$t()}}という記法が独特

<template>  
  <div>  
    <h1>{{$t("Hoge.description")}}</h1>  
  </div>  
</template>  
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

Tech memos

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!