vue-i18n 在项目中的使用方法

1、在assets文件夹下新建locales文件夹，文件夹下结构为

locales--index.js --en.json --zh.json

2、index.js内代码如下

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import ElementLocale from 'element-ui/lib/locale'
import store from '../../store/index'

Vue.use(VueI18n)

const DEFAULT_LANG = 'zh'
const LOCALE_KEY = 'localeLanguage'

const locales = {
  zh: {
    ...require('./zh.json'),
    ...zhLocale
  },
  en: {
    ...require('./en.json'),
    ...enLocale
  },
}

const i18n = new VueI18n({
  locale: DEFAULT_LANG,
  messages: locales,
  silentTranslationWarn: true,
})
ElementLocale.i18n((key, value) => i18n.t(key, value))
export const setup = lang => {
  if (lang === undefined) {
    lang = window.localStorage.getItem(LOCALE_KEY)
  }

  if (locales[lang] === undefined) {
    lang = DEFAULT_LANG
  }
  window.localStorage.setItem(LOCALE_KEY, lang)

  Vue.config.lang = lang
  i18n.locale = lang
  store.commit('CHANGE_LANG', lang)
}
var lang = navigator.language || navigator.userLanguage;
lang = lang.substr(0, 2);
if (lang != 'zh') {
  lang = 'en';
}
const langArr = navigator.language.split('')
const localeLang = window.localStorage.getItem(LOCALE_KEY)
langArr.length = 2

setup(localeLang ? localeLang : langArr.join('') == 'en' ? langArr.join('') : null)
export default i18n

3、zh.json & en.json

{
    "确定":"确定",
    "取消":"取消"
}
{
    "确定":"ok",
    "取消":"cancel"
}

4、在main.js内引用

 import i18n from './assets/locales/index'
 new Vue({
  el: '#app',
  router,
  i18n,
  store,
  render: h => h(App)
})

5、页面中导入setup方法，增加切换按钮

 import { setup } from "@/assets/locales/index";
 <div class="lang">
    <span  @click="change('en')">ENG</span>
    <span  @click="change('zh')">中文</span>
 </div>
 
 change(flag) {
  if (flag == this.flag) {
    return false
  }
  setup(flag)
}

6、组件内使用

 :label="$t('确定')" //html
 this.$t("确定")     //js