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>
复制代码