Vue-i18n使用（適合萌新）

i18n的簡單應用

i18n（其來源是英文單詞 internationalization的首末字符i和n，18爲中間的字符數）是「國際化」的簡稱。在資訊領域，國際化(i18n)指讓產品（出版物，軟件，硬件等）無需作大的改變就可以適應不一樣的語言和地區的須要。對程序來講，在不修改內部代碼的狀況下，能根據不一樣語言及地區顯示相應的界面。 在全球化的時代，國際化尤其重要，由於產品的潛在用戶可能來自世界的各個角落。一般與i18n相關的還有L10n（「本地化」的簡稱）

很少說了直接走起

需求：

公司項目須要國際化，點擊按鈕切換中文/英文

咱們首先要進行安裝：

npm install vue-i18n --save
複製代碼

以後咱們要在咱們的main.js內引入

import Vue from 'vue'
import App from './App'
import router from './router'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 經過插件的形式掛載
const i18n = new VueI18n({
  locale: 'zh',    // 語言標識
  //this.$i18n.locale // 經過切換 locale 的值來實現語言切換
  messages: {
    'zh': require('@/locale/zh.js'),   // 中文語言包
    'en': require('@/locale/en.js')    // 英文語言包
  }
})
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  i18n,
  router,
  components: { App },
  template: '<App/>'
})
複製代碼

其中

messages: {
    'zh': require('@/locale/zh.js'),   // 中文語言包
    'en': require('@/locale/en.js')    // 英文語言包
  }
複製代碼

咱們message內部引用的語言包要根據咱們自身的需求去進行更改，有的多是雙語言需求有的多是多語言,請根據自身進行調整。 (相似雙token/header)

這是我放語言包的地址和文件(看截圖就能看懂)

這是en的
module.exports = {
    language: {
        name: 'English',
    }
}
這是zh的
module.exports = {
    language: {
        name: '中文',
    }
}
複製代碼

有的人可能用過i18認爲我可能寫的過於簡單了,其實不是內容就是一個格式的表。咱們要根據本身的需求去寫，因此在這裏我就不給一些18'萌新'留下一些先入爲主的觀念了.總用的諒解下哈~

以後咱們就能夠在頁面當中去寫功能了-->首先咱們轉換文字確定是經過咱們觸發的某個功能纔會發生改變.因此咱們要觸發咱們的某個事件這裏咱們就用點擊事件代替了

<p v-on:click="changeL" >
	Language: CN/EN
</p>
或
<p @click="changeL" >
	Language: CN/EN
</p>
簡單來講@就是v-on的縮寫，還有就是：是v-bind的縮寫
複製代碼

觸發事件

changeL(){
		if ( this.lang === 'zh' ) {
			this.lang = 'en';
			this.$i18n.locale = this.lang; // 關鍵語句
		}else {
			this.lang = 'zh';
			this.$i18n.locale = this.lang; // 關鍵語句
		}
	}
複製代碼

以後改變咱們頁面的內容

內容格式：

我的以爲統一一點用這種就好
{{ $t('language.name') }}
複製代碼

若是須要深度一些的i18n請關注我稍後的更新謝謝.