VueJS 使用i18n做国际化切换中英文

vue-i18n 国际化。

1、安装

npm install vue-i18n

2、在main.js中引入并使用

import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

// 使用多文件管理不同的语言是一个好习惯：
const i18n = new VueI18n({
  // locale: LangStorage.getLang('zh'),  // 语言标识，后面会用做切换和将用户习惯存储到本地浏览器
  locale: 'zh', // 语言标识
  messages: {
    'zh': require('./common/lang/zh'),
    'en': require('./common/lang/en')
  }

3、创建多语言的文件夹和js文件

我是在src下创建了common目录和lang子级目录，然后新建了zh.js和en.js两个js文件。

en.js文件内容：

module.exports = {
  language: {
    name: '中文'
  },
  navbar: {
    home: 'home',
    introduction: 'introduction',
    contact: 'contact'
  }
}

zh.js文件内容：

module.exports = {
  language: {
    name: 'English'
  },
  navbar: {
    home: '首页',
    introduction: '简介',
    contact: '联系我们'
  }
}

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

英文页面+中文按钮 中文页面+英文按钮

4、在html中使用i18n

随便找个地：

<p>{{ $t('language.navbar.contact') }}</p>

即可以显示zh.js中的contact，之所以是zh，这是main.js中初始化时的默认语言配置。

5、变更语言

随便建个按钮，绑定一个事件，在methods下加个函数并调用：

changeLocale() {
  let locale = this.$i18n.locale
  locale === 'zh' ? this.$i18n.locale = 'en' : this.$i18n.locale = 'zh'
  // LangStorage.setLang(this.$i18n.locale) //后面会用做切换和将用户习惯存储到本地浏览器
}

可以点击切换语言了。

6、存储用户习惯到cookies做默认设置

VueJS 保存cookie信息

The end.