vue-i 18 nマルチ言語切り替えを実現

まずインストール

npm install vue-i18n

そしてmain.jsに導入:

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

関連ファイルの設定
srcルートディレクトリの新しいlanguageフォルダにindexを配置します.jsやその他の言語パッケージは、中国語と英語を例に挙げています.

// index.js
import messagesEn from './en'
import messagesCn from './cn'

const messages = {
  en: {
    message: messagesEn
  },
  cn: {
    message: messagesCn
  }
}

export default messages

// en.js
const messagesEn = {
  login: 'Sign in',
  signOut: 'Sign out',
  register: 'Sign up',
  help: 'Help'
  }

// cn.js
const messagesCn = {
  login: '   |     ',
  signOut: '  ',
  register: '  ',
  help: '    '
 }

そしてmain.jsに導入

import messages from './language/index'

main.jsその他のコード

function lang () {
//         localStorage 
  let t = window.localStorage.getItem('language')
  if (t) return t
  //     
  else return 'cn'
}

const language = lang()

//     window   lang   
window.lang = lang()

//      i18n   
const i18n = new VueI18n({
  locale: language,    //     
  messages
})

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

言語の切り替え
切り替えたコンポーネントのイベントメソッドコードにコードを追加すればよい

this.$i18n.locale = 'en'
window.localStorage.setItem('language', 'en')