Vue中使用vue-i18n实现中英文切换

前言

更多内容，请访问我的 个人博客。

安装依赖

npm install 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('./utils/lang/cn'),   // 中文语言包
    'en': require('./utils/lang/en')    // 英文语言包
  },
})

多语言的js文件

• cn.js文件内容：

  module.exports = {
    language: {
      name: 'English'
    },
    login: {
      welcome: '欢迎您'
    }
  }
  

• en.js文件内容：

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

上面的name语言之所以是反的，是因为切换按钮的文字显示需要是反，即英文页面显示中文切换按钮，中文页面显示英文切换按钮。

使用i18n

<template>
    <p>{{ $t('language.name') }}</p>
</template>
<script>
    test() {
        var name = this.$t('language.name')
    },
</script>