vue 实现中英文切换

一、安装 vue-i18n

npm i vue-i18n

二、main.js文件的配置

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: window.localStorage.getItem('user_lang') == null ? "cn" : window.localStorage.getItem('user_lang'),    // 语言标识
  messages: {
    'cn': require('./i18n/langs/cn'),   // 中文语言包
    'en': require('./i18n/langs/en')    // 英文语言包
  },
})
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

三、定义两套中英文的 js 文件

en.js 英文语言包：

module.exports = {
  language: {
    name: '中文'
  },
}

cn.js 中文语言包

module.exports = {
  language: {
    name: 'English'
  },
}

四、绑定切换动作

      switchLang(){
        this.$i18n.locale = this.language == 'En' ? 'cn' : 'en'
        this.language = this.language == 'En' ? 'cn' : 'En'
        localStorage.setItem('user_lang', this.language)
      },

五、vue-i18n 数据渲染的模板语法

<span>{{$t('language.name')}}</span>