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>