国际化 i18n,前端切换中英文模式

安装i18n包，全局引入

import i18n from '@/locales'

创建locales.js文件

index.js作为入口文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import { LOCALE_LANG, DEFAULT_LANG } from '@/utils/const'

Vue.use(VueI18n)

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

const i18n = new VueI18n({
  locale: DEFAULT_LANG,
  messages: locales
})
export const setup = (lang) => {
  if (!lang) {
    lang = window.localStorage.getItem(LOCALE_LANG) || DEFAULT_LANG
  }
  window.localStorage.setItem(LOCALE_LANG, lang)
  Object.keys(locales).forEach(lang => {
    document.body.classList.remove(`lang-${lang}`)
  })
  document.body.classList.add(`lang-${lang}`)
  document.body.setAttribute('lang', lang)
  Vue.config.lang = lang
  i18n.locale = lang
}

export default i18n

  在en.json和zh.json中编辑要改变的文本

main.js引入并使用  

import i18n from '@/locales'

在需求改变的页面中引入方法

import { setup } from "@/locales";



在mounted中调用，传入需要的语言

this.setup(this.lang)

 最后模板使用

 <div>{{ $t("FAQsText") }}</div>