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,具体操作请参考前面一片文章—>监听本地存储

完结。
-------------------------------------------------分割线------------------------------------------------------