利用vue-i18n实现多语言切换效果的方法

前言

有些项目我们需要支持多种语言切换，满足国际化需求。 vue-i18n是一个vue插件，主要作用就是让项目支持国际化多语言，使用方便快捷，能很轻松的将我们的项目国际化。本文主要介绍使用vue-i18n实现切换中英文效果。

安装vue-i18n

我们使用npm安装vue-i18n。

npm install vue vue-i18n --save

引入vue-i18n

首先在 main.js 中引入 vue-i18n。

import Vue from 'vue'
import App from './App'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // 通过插件的形式挂载

接着创建带有选项的 VueI18n 实例。

const i18n = new VueI18n({
 locale: localStorage.getItem('locale') || 'zh-CN',
 //this.$i18n.locale // 通过切换locale的值来实现语言切换
 messages: {
  'zh-CN': require('./lang/zh'), // 中文语言包
  'en-US': require('./lang/en') // 英文语言包
 }
})

注意实例中加载了中英文两个语言包。分别准备两个语言包, 使用require引入到main.js中：

中文语言包：zh.js

export const m = {
  welcome: '欢迎来到北京',
  today: '今天是',
  week: {
  sun: '星期日',
  mon: '星期一',
  tues: '星期二',
  wed: '星期三',
  thur: '星期四',
  fri: '星期五',
  sat: '星期六'
  }
}

英文语言包: en.js

export const m = {
 welcome: 'Welcome to Beijing.',
 today: 'Today is ',
 week: {
 sun: 'Sunday',
 mon: 'Monday',
 tues: 'Tuesday',
 wed: 'Wednesday',
 thur: 'Thursday',
 fri: 'Friday',
 sat: 'Saturday'
 }
}

然后把 i18n 挂载到 vue 根实例上：

new Vue({
 el: '#app',
 i18n,
 components: { App },
 template: '<App/>'
})

使用vue-i18n

我们先建立模板：

<button @click="changeLang">切换语言</button>
 <h1>{{$t('m.welcome')}}</h1>
 <h3>{{$t('m.today')}}{{weekname}}</h3>

注意用法，在组件的模板template中，调用 $t() 方法， {{$t(‘m.welcome’)}} 表示使用welcome的语言。如果是在组件的script中，调用 this.$i18n.t() 方法获取语言，下文会讲到。

我们想通过点击“切换语言”按钮，来对模板中的文字内容进行相应的语言切换。

那我们就在方法 changeLang() 中这样写：

changeLang() {
  this.lang = localStorage.getItem('locale') || 'zh-CN';								 
 1/2    1 2 下一页 尾页