网站国际化多语言处理工具i18n安装使用方法图文详解

npm install --save vue-i18n

npm install --save vue-i18n@8.27.1

import Vue from 'vue';
import Element from 'element-ui'
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 en from './locale/en'
import zh from './locale/zh-CN'
const messages={
  en: {
      ...en,
      ...enLocale
  },
  zh: {
      ...zh,
      ...zhLocale
  }
}
let lang = localStorage.getItem('lang');
let locale = lang =='en_US'?'en':'zh';

Vue.use(VueI18n)
const i18n = new VueI18n({
	locale: locale, //设置默认语言
	messages,
    silentTranslationWarn: true
});

Vue.use(Element,{
    i18n:(key,value) => i18n.t(key,value)
})
export default i18n;

html  {{ $t('index.title') }}
绑定值  :placehoider="$t('index.title')"
js  this.$t('index.title')

{
  "i18n-ally.localesPaths": [
    "pxxxxx/xxxxx/src/i18n/locale",
  ],
  "i18n-ally.keystyle": "nested",
    "i18n-ally.sortKeys": true,
    "i18n-ally.enabledParsers": ["json", "js"],
    "i18n-ally.sourceLanguage": "zh-CN",
    "i18n-ally.displayLanguage": "zh-CN",
    "i18n-ally.enabledFrameworks": [
        "vue"
    ],
    "i18n-ally.translate.engines": ["google-cn", "google","deepl","libretranslate"]
}