Vue-i18n实现应用多语言切换（附代码）

什么是Vue-i18n

vue-i18n是一个Vue.js国际化的插件，就是在vue应用中嵌入语言切换功能，可以切换已导入到项目中的各个语系。

先看一下效果

这里我以Vue+Element-ui创建的一张卡片为栗：

如何实现:

• 1、安装 vue-i18n，推荐 npm 包依赖：

  npm install vue-i18n

• 2、注入 vue 实例中，项目中实现调用 api 和 模板语法
  在main.js中使用Vue-i18n

  // main.js
  import VueI18n from "vue-i18n";
  Vue.use(VueI18n)
  const i18n = new VueI18n({
  locale: 'zh-CN', // 标识当前所用的语言
  messages:{
  // 将定义好的语言包导入
  'zh-CN': require('./assets/lang/zh.js'), // 已经定义好的中文包
  'en-US': require('./assets/lang/en.js') // 已经定义好的英文包
  }
  })

  new Vue({
  el: '#app',
  router,
  i18n, // 记得把创建的VueI18n实例绑定到Vue组件中
  components: { App },
  template: ''
  })

• 3、定义要用到的关键字的相关属性和值：（用js导出对象或者定义相关的json文件都行）
  这里我两种方式都给大家演示一下，大家用哪一种都行
  

  如果是定义js对象，以下为en.js和zh.js

  // zh.js
  export default {
  lan: '中文',
  countrys:['中国','美国','英国', '加拿大']
  }

  // en.js
  export default {
  lan: 'English',
  countrys:['China','US','Unity Kingdom', 'Canada']
  }

  如果是定义json对象，以下为en.json和zh.json

  // en.json
  {
  "lan":"English",
  "countrys":["China","US","Unity Kingdom","Canada"]
  }

  // zh.json
  {
  "lan":"中文",
  "countrys":["中国","美国","英国","加拿大"]
  }

• 4、属性引用:
  引用相关的变量的时候，不论是在v-text,v-html中还是{{}}里边，原来的prop.value，要变成$t('prop.value')

• 5、语言切换：

  export default {
  name: "testI18",
  methods:{
  // 语言切换逻辑，主要是更改this.$i18n.locale的值
  tog(){
  this.$confirm('确定要切换语言吗？','提示',{
  confirmButtonText: '切换',
  cancelButtonText: '取消',
  type: 'warning'
  }).then(()=>{
  if(this.$i18n.locale == 'zh-CN'){
  this.$i18n.locale = 'en-US'
  this.$message.success('当前语言为：英文')
  }else {
  this.$i18n.locale = 'zh-CN'
  this.$message.success('当前语言为：中文')
  }
  }).catch(()=>{
  this.$message.error('切换失败！，请重试')
  })
  }
  }
  }

最后

附上Vue-i18n源码的传送门：https://github.com/kazupon/vue-i18n