VueI18n多語言

 npm install vue-i18n

1. 新建語言包（zh,en兩種語言爲例）

//zh.js文件

const zh = {
    header: '頭'
}
export default zh;


//en.js文件

const en = {
    header: 'header'
}
export default en;

2. 在main.js中引入，注意，如果項目中有用到UI庫，別落下了，參照api

import ViewUI from 'view-design'; //這裏用的是iviewUI庫
import VueI18n from 'vue-i18n'
import store from './store'

import zh from '../static/language/zh';
import en from '../static/language/en';
import zhCN from 'view-design/dist/locale/zh-CN'//iviewUI 的語言包
import enUS from 'view-design/dist/locale/en-US'
Vue.use(VueI18n)

const i18n = new VueI18n({
  	messages: {
    	'zh': Object.assign( zhCN, zh),
   		 'en': Object.assign( enUS, en),
	},
	silentTranslationWarn: true,
})

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

3. 配合vuex和本地存儲使用國際化在store.js文件中設置

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    language: localStorage.getItem('language') ? localStorage.getItem('language') : 'en',
  },
  mutations: {
    changeLanguage(state, language) {
      localStorage.setItem('language', language);
      state.language = language;
    },
  },
  actions: {
    subLanguage(context, val) {
      context.commit('changeLanguage', val)
    }
  },
  getters : {
    getLanguage(state) {
        return state.language
    },
  },
})

4. 組件中使用

    {{$t('header')}}
    <button @click="change('zh')">語言</button>
    <button @click="change('en')">en</button>
    
	change(value) {
      this.$i18n.locale = value;
      this.$store.dispatch('subLanguage', value);
      // dispatch與commit的區別是前者是異步操作 後者是同步操作相當於this.$store.commit('changeLanguage', value)

    }

5. 組件中監聽語言變化

computed:{
      currentLanguage(){
          return this.$store.state.language
      }
 },

如果切換語言需要頁面即時做出相應的改變，就需要監聽localStorage,具體操作請參考前面一片文章—>監聽本地存儲

完結。
-------------------------------------------------分割線------------------------------------------------------