vue项目 使用 vue-i18n国际化

一、下载依赖

npm install vue-i18n

二、创建翻译文件夹
我是在 src/components/lang/ 下面创建了en-US.js 和 zh-CN.js
三、在main.js中配置
有缓存从缓存拿，默认中文

import VueI18n from 'vue-i18n'
import zhCN from '@/components/lang/zh-CN.js'
import enUS from '@/components/lang/en-US.js'
Vue.use(VueI18n)
const lang = localStorage.hasOwnProperty('pro__DEFAULT_LANGUAGE') ? JSON.parse(localStorage.pro__DEFAULT_LANGUAGE).value : ''
console.log(lang, 'main-----')
// 注册i18n实例并引入语言文件，文件格式等下解析
const i18n = new VueI18n({
  locale: lang || 'zh-CN',
  messages: {
    'zh-CN': zhCN,
    'en-US': enUS
  }
})
//将i18n注入到vue实例中
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  components: { App },
  template: '<App/>'
})

四、配置切换中英文按钮

      lang: localStorage.hasOwnProperty('pro__DEFAULT_LANGUAGE') ? JSON.parse(localStorage.pro__DEFAULT_LANGUAGE).value : 'zh-CN',

 <a-dropdown>
          <span>
            <a>
              <a-icon type="global" />
            </a>
            <span v-if="language === 'zh-CN'">
              中文
            </span>
            <span v-if="language === 'en-US'">
              English
            </span>
          </span>

          <a-icon type="down" />
          <a-menu slot="overlay">
            <a-menu-item>
              <span @click="chooseLanguage('zh-CN')">{{$t('lang.zhCN')}}</span>
            </a-menu-item>
            <a-menu-item>
              <span @click="chooseLanguage('en-US')">{{$t('lang.enUS')}}</span>
            </a-menu-item>
          </a-menu>
        </a-dropdown>

chooseLanguage(val) {
      this.$store.dispatch('ToggleLanguage', val)
      this.$i18n.locale = val
      this.lang = val
    },

vuex
actions:{
 ToggleLanguage({ commit }, language) {
      commit('SET_LANGUAGE', language)
    },
}
mutations:{
SET_LANGUAGE(state, language) {
      Vue.ls.set(DEFAULT_LANGUAGE, language)
      state.language = language
    },
state: {
    language: localStorage.hasOwnProperty('pro__DEFAULT_LANGUAGE') ? JSON.parse(localStorage.pro__DEFAULT_LANGUAGE).value : 'zh-CN',
}
}

import {  DEFAULT_LANGUAGE,
} from "@/store/mutation-types"


//mutation-types
export const DEFAULT_LANGUAGE = 'DEFAULT_LANGUAGE'

最后 $t(‘xxxx.ddd’) 就可以使用了