vue项目使用i18n实现语言国际化操作

npm安装vue-i18n

npm install vue-i18n -S

查看package.json

准备目录结构和配置文件

i18n.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const DEFAULT_LANG = 'en'
const LOCALE_KEY = 'localeLanguage'

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

const i18n = new VueI18n({
  locale: DEFAULT_LANG,
  messages: locales,
})

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)

  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
}

// setup()
export default i18n

在i18n.js文件中，我们不需要关注其他的配置，只需看懂这2项配置即可。

---

zh.js

module.exports = {
    userInfo:{
        name:'姓名',
        number:'联系方式',
        EMail:'电子邮箱',
        massage:'留言内容',
        followUs:'联系我们'
    }
}

---

en.js

module.exports = {
    userInfo:{
        name:'Name',
        number:'Contact information',
        EMail:'E-mail',
        massage:'Message content',
        followUs:'Follow us'
    }
}

main.js引入使用

import i18n from './i18n/i18n' 

new Vue({
  router,
  store,
  i18n,
  render: h => h(App)
}).$mount('#app')

使用方式

在.vue文件中使用

语法是{{$t('标识')}}

<div>{{$t('userInfo.name')}}

页面显示中文还是英文取决于i18n.js文件当中的这一行命令

const DEFAULT_LANG = 'zh'

当DEFAULT_LANG = 'zh'，页面显示中文
当DEFAULT_LANG = 'en'， 页面显示英文

案例：实现中英切换

<template>
  <div>
      {{$t('userInfo.name')}}:<el-input placeholder=""></el-input>
       <el-button type="primary" @click="changeLang">中/英</el-button>
  </div>
 
</template>

<script>
export default {
    methods:{
        changeLang(){
            const lang = this.$i18n.locale //获取当前页面默认使用的语言
            console.log(lang)  //控制台输出 'zh'
            // 实现中英切换
            if(lang == 'zh'){ //如果默认是中文，在用户点击时就切换到英文状态
                this.$i18n.locale = 'en'
            }else {
                this.$i18n.locale = 'zh'
            }
        }
    }
}
</script>

<style>

</style>