目录

第一步：

第二步：

第三步：

第四步：

最后：

---

前言：我们有时候会遇到一个项目需要支持多语言，而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需要用到 i18n  ，这个插件的作用是创建这个自己的字典，使其切换语言时用到的文案是自己编写的，这样就可以做到实现自己想表达的效果.
 

话不多说，直接上源码：

第一步：

首先呢，肯定是先安装依赖啦

npm install vue-i18n -save

安装完接着就在main.js中引入

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

第二步：

前言里我们说到这个插件是让我们引用自己的字典文件.所以这里我们要插件字典文件夹具体取名自己决定：

建好后确定一下自己项目要做几种语言就对应几个文件夹，我这边是三个语言
English->英语  Chinese-> 汉语  Vietnamese-> 汉语

并且在对应文件里把他暴露出来：
 

第三步：

对字体文件的切换我这边是利用localStorage的形式进行，接下来需要对这些字典文件进行引入 切换 在main.js里  我们在引入插件的下方进行配置

const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'english', // 语言标识
  //this.$i18n.locale // 通过切换locale的值来实现语言切换
  messages: {
    english: require('./language/english'), // 英文
    Vietnamese: require('./language/Vietnamese'), // 越南语
    zh: require('./language/zh'), // 中文
  }
})

然后挂载到vue上

new Vue({
  i18n, // 国际化挂载
  router,
  store,
  render: h => h(App)
}).$mount('#app')

第四步：

定义切换的数据：

language: 'english', // 选中的语言
languagelist: ['english', 'Vietnamese'，zh],

然后在切换语言的界面获取用户选择而保存的语言 如果是新用户  则把他加到localStorage里

created() {
    // 获取缓存的语种，如若没有（新用户），保存当前默认语言
    if (localStorage.getItem('lang')) {
      console.log(localStorage.getItem('lang'))
      this.language = localStorage.getItem('lang')
    } else {
      localStorage.setItem('lang', this.language)
    }
  },

在用户点击切换语言的时候 调用方法更改localStorage里的值：

    selectlang(e) {
      console.log(e.target.selectedIndex)
      // 根据监听改变获取到的值去数组里找到对应的值
      localStorage.setItem('lang', this.languagelist[e.target.selectedIndex])
      this.$i18n.locale = this.languagelist[e.target.selectedIndex] //切换字典文件
    },

这样就可以起到切换的作用了.

最后：

接下来就是最后在页面上的写法了，这里是插件的统一写法用$t的方式：

<template>
　　<div>　　
  　　<h1>{{ $t("m.test") }}</h3>
　　</div>
</template>

还有这里官方文档给出的基本方法：

$t：普通词
$tc：单复数
$te：check 翻译key是否存在
$d：时间日期
$n：货币数字

用$t就好了  要是你要求规范就按文档的规范来，到这里后就可以开始我们的国际化开发啦~
 

手动码字不易，如果你觉得对你有帮助的好劳烦你动动你的小手点个赞，当然关注收藏三连就更好了！！！^_^！

更多具体的详情见官方文档（虽然这个文档烂的一批...）
https://kazupon.github.io/vue-i18n/zh/introduction.html