Vue 項目中使用國際化， 並配置動態切換語言的方法

主要由如下幾個模塊組成由 ：

• src\main.js
• src\locales\index.js
• src\locales\zh_CN.json
• src\utils\config.js

# src\main.js

import i18n from '@/locales/index.js'

new Vue({
  el: '#app',
  i18n,
  router,
  store,
  render: h => h(App)
})

# src\locales\index.js

import Cookies from 'js-cookie'
import VueI18n from 'vue-i18n'
import Vue from 'vue'

const data = {}
const locale = Cookies.get('hb_lang') || 'en_US'
const readDir = ['en_US', 'zh_CN', 'th_TH']
for (let i = 0; i < readDir.length; i++) {
  data[readDir[i]] = require(`./${readDir[i]}.json`)
}

Vue.use(VueI18n)
const i18n = new VueI18n({
  locale,
  fallbackLocale: locale, // 語言環境中不存在相應massage鍵時回退到指定語言
  messages: data
})

export default i18n

# src\locales\zh_CN.json

示例項目包涵中英泰三國語言, 這裏僅抽出中文做爲示例 :

{
  "歡迎登陸": "歡迎登陸",
  "參數配置":"參數配置",
  "折價幣種":"折價幣種"
}

調用方法 :
<h1 class="slogan">{{ $t('歡迎登陸') }}</h1>

# src\utils\config.js

import Cookies from 'js-cookie'
import i18n from '@/locales/index.js'
const Key = 'hb_lang'

export function get() {
  return Cookies.get(Key)
}

export function set(data) {
  i18n.locale = data
  return Cookies.set(Key, data)
}

export function remove() {
  return Cookies.remove(Key)
}

其中 , 當須要動態切換語言時，調用 set 方法便可， 例如:

import { set as setLanguage } from '@/utils/config.js'

setLanguage('en_US')

# 注意事項

以上配置須臾結合 Vue 的 {{}} 進行編輯, 例如上文所提到的 :
<h1 class="solutions">{{ $t('solutions') }}</h1>

假若像下面這樣則會致使切換語言時, 沒法動態即時更新文案 :

// 不要這樣寫, 解決方法在下面
<template>
  <div>
    <div class="solutions">{{ solutions }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      solutions : this.$t('solutions')
    }
  }
}
</script>

解決方法 :

<template>
  <div>
    <div class="solutions">{{ solutions }}</div>
  </div>
</template>

<script>
export default {
  watch: {
    '$store.state.lang'(language) {
      this.init()
    }
  },
  data() {
    return {
      solutions : this.$t('solutions')
    }
  },
  created() {
    this.init()
  },
  methods: {
    init(){
      this.solutions = this.$t('solutions')
    }
  },
}
</script>

# 同系列的其餘文章

• Nuxt 項目中使用國際化， 並配置動態切換語言的方法