vue項目中實現多語言 vue-i18n處理動態加載後端數據語言

項目要求多語言  最好是可以根據後臺配置的顯示

首先是安裝npm install vue-i18n  -S

當然也可以這樣：

<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

然後需要在main.js中引入文件

1、添加locales文件夾

新建一個locales文件夾，存放所有跟多語言相關的代碼。目前包含三個文件：index.js, en.json, zh.json

en.json和zh.json就是我們的語言包，是一個json形式。這裏爲了對照方便，我們必須保證語言包的內容是一一對應的。然後我們在index.js中完成設置

index.js:

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

Vue.use(VueI18n)

const DEFAULT_LANG = 'zh'
const LOCALE_KEY = 'localeLanguage'

const locales = {
  zh: require('./zh.js'),
  en: require('./en.js'),
}

const i18n = new VueI18n({
  locale: DEFAULT_LANG,
  messages: locales,
})


export const setup = lang => {
  if (lang === undefined) {
    lang = window.localStorage.getItem(LOCALE_KEY)
    if (locales[lang] === undefined) {
      lang = DEFAULT_LANG
    }
  }
  window.localStorage.setItem(LOCALE_KEY, lang)

  Object.keys(locales).forEach(lang => {
    document.body.classList.remove(`lang-${lang}`)
  })
  document.body.classList.add(`lang-${lang}`)
  document.body.setAttribute('lang', lang)

  Vue.config.lang = lang
  i18n.locale = lang
}

setup("zh")
window.$i18n = i18n;
export default i18n

en.json和zh.json這兩個文件可以只填{ }即可 

我們對外提供了一個setup()的方法，給使用者修改當前使用語種的能力。同時，我們在setup裏還做了三件事：
將當前語種存到 localStorage中，保存用戶的使用習慣；給body添加語種相關的class，因爲不同語言可能導致排版出現差異，我們需要適配；將當前語種存到Vue的全局配置中，以便未來可能的使用。

最後我們在main.js中引入這個Index.js即可。但是因爲我把i18n掛載到了window上所以引入的順序需要渲染頁面的前面。

//main.js
import Vue from 'vue'

import i18n from '@crm/locales'   //<=======
import App from './app.vue'
import store from './store'
import router from './router'

 然後在app.vue的created生命週期中讀取後臺預先設置的json文件

讀取到之後再通過$i18n.mergeLocaleMessage插件的方法 將語言環境信息 合併到已註冊的語言環境信息中

 created() {
      this.test();
    },

    methods: {
      test() {
        $http.fetch("/addons/yun_shop/static/app/locales/test.json").then(
          function(response) {
            console.log(response.data);
            $i18n.mergeLocaleMessage('en', response.data.en)
            $i18n.mergeLocaleMessage('zh', response.data.zh)
          },
          function(response) {
            console.log(response);
          }
        );
      },
}

 前端切換的時候可以通過修改$i18n.locale = "en"這樣的方式進行切換

vue-i18n 數據渲染的模板語法：

{{ $i18n.t("message.hello") }}

這個是test.json文件的格式：

{
  "en":{
    "message": {
      "hello": "hello world"
    },
    "test": "test"
  },
  "zh":{
    "message": {
      "hello": "こんにちは、世界"
    },
    "test": "測試~"
  }
}

 這樣就可以通過修改/addons/yun_shop/static/app/locales/test.json  服務器中的這個文件來動態設置語言

 

參考鏈接：

https://fullsmilespace.com/?p=836

https://kazupon.github.io/vue-i18n/zh/api/#%E6%96%B9%E6%B3%95

https://blog.csdn.net/DOCALLEN/article/details/78408137?locationNum=2&fps=1

https://segmentfault.com/a/1190000015008808?utm_source=tag-newest#articleHeader2