有時我們在專案中會用到多個國家語言的切換，這時候我們就不能把內容寫死了，而是藉助工具實現語言的轉換。

今天介紹的這個就是開源的 vue-i18n

首先，第一步我們要先學會在專案中如何去使用，才能進行下一步切換ui框架的內建語言，後邊會以element-ui和vant ui為例

安裝：

npm i vue-i18n -S

在assets專案下寫了幾個js檔案，cn.js是英文，en.js是中文，index.js是輸出檔案，vantLocal.js是專門為vant ui切換語言的方法（一個練習中英文切換的demo，更多語言請自行配置）

en.js

const message =  {
    hello: 'hello',
    about: 'about',
    welcome: "Welcome"
  }
  export default message;
 

cn.js

const message =  {
    hello: '你好',
    about: '關於',
    welcome: "歡迎"
  }
export default message;

index.js

import en from './en'
import cn from './cn'
const messages = {
    en: {
        message:en
    },
    zhCHS: {
        message:cn
    }
}
export default messages;

vantLocal.js

import { Locale } from 'vant';
import enUS from 'vant/lib/locale/lang/en-US';
import zhCN from 'vant/lib/locale/lang/zh-CN';
export function Locals(a){
    if(a == 'en'){
        Locale.use('en', enUS);
    }else if(a == 'zhCHS'){
        Locale.use(a, zhCN);
    }
}
 

在main.js中使用（自行引入其他的Vue,element-ui,vant等元件，這裡為了方便觀察，只寫了核心程式碼）

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  //定義預設語言
  locale: 'en', 
  messages
})

locale.i18n((key, value) => i18n.t(key, value)) //方便element使用，其內部封裝也是採用的i18n
/*vue上掛在vant i18n方法*/
import {Locals} from './assets/lang/vantLocal.js'
Vue.prototype.$Local = Locals

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

在vue結構中：

直接通過{{$t(...)}}

在js中通過this.$("...")獲取值

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="cn">切換中文</button>
    <button @click="en">切換英文</button>
    h3 {{ $t("message.hello") }}
    <h1>{{$t('message.welcome')}}</h1>
    <div @click="top">餓了麼測試</div>
    <demo></demo>
    <!-- vant元件 -->
    <van-datetime-picker
  v-model="currentDate"
  type="datetime"
  :min-date="minDate"
  :max-date="maxDate"
/>
  </div>
</template>

<script>
import demo from './home-demo'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{

      minHour: 10,
       maxHour: 20,
       minDate: new Date(),
       maxDate: new Date(2019, 10, 1),
       currentDate: new Date()
    }
  },
  methods:{
    cn(){
      this.$i18n.locale='zhCHS'
      this.$Local('zhCHS')
    },
    en(){
      this.$i18n.locale='en'
      this.$Local('en')
    },
    top(){//element-ui的彈窗元件
      this.$alert(this.$t('message.welcome'),this.$t('message.welcome'), {
        confirmButtonText: this.$t('message.welcome')
      });
    }
  },
  components:{
    demo
  }
}
</script>

一起看下結果

中文：

英文：（為了便於觀察，視窗的位置上調，能看到切換的按鈕）