在项目的开发中,我们会遇到些给之前的老项目做添加多语言。然而项目庞大而复杂，文本的替换又是一个枯燥耗时的工作。而对于Vue技术栈来讲，使用## vue-i18n文件架构来操作文本替换会变得更加方便简单。、

应用场景

一个网站的内容分为动态与静态：
1.动态的数据这里狭义的指从数据库获取并加工返回给前台的，这个需要再发送请求的时候加上language相关信息进行区分
2.静态数据，现在常规的做法就是定义多份json文件,内容就是一个包含所有翻译的字段以及值得变量

每种翻译各一份。同样的变量名，然后根据语言做好对应的翻译，使用的时候直接使用变量。-- 在全局变量的源头进行语言的全局变量的赋值，切换语言时记得进行全局变量重新赋值
以上为手动中英文

现在很多框架都有定义好的文件架构 -- i18n，只需把数据按照此方式放进去，直接用就行了

详细步骤

安装 vue-i18n

npm i vue-i18n@8.22.2

进行多语言的配置

// 进行多语言支持配置
import Vue from 'vue' // 引入Vue
import VueI18n from 'vue-i18n' // 引入国际化的插件包
import locale from 'element-ui/lib/locale'
import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
Vue.use(VueI18n) // 全局注册国际化包

// 创建国际化插件的实例
const i18n = new VueI18n({
  // 指定语言类型 zh表示中文  en表示英文
  locale: 'zh',
  // 将elementUI语言包加入到插件语言数据里
  messages: {
    // 英文环境下的语言数据
    en: {
      ...elementEN
    },
    // 中文环境下的语言数据
    zh: {
      ...elementZH
    }
  }
})
// 配置elementUI 语言转换关系
locale.i18n((key, value) => i18n.t(key, value))

export default i18n

挂载vue-i18n插件到vue实例

// 省略其他...
import i18n from '@/lang'
// 加入到根实例配置项中
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

需要注意的是我们在使用vue-i18n的时候，一种要使用全局注册的方法来使用插件

插件通常会为 Vue 添加全局功能。插件的范围没有限制——一般有下面几种：添加全局方法或者属性；添加全局资源：指令/过滤器/过渡等；通过全局 mixin 方法添加一些组件选项；添加 Vue 实例方法，通过把它们添加到 Vue.prototype 上实现。

## vue模板文件中使用

//vue组件模板的使用
<div>{{$t('message.zh')}}</div>

//vue组件模板数据绑定的使用
<input :placeholder="$t('message.zh')"></input>

//vue组件data中赋值的使用
data:{
   msg:this.$t('message.zh');
}

注意：

在组件的template中，调用$t()方法
在组件的script中，调用this.$i18n.t()方法

## 切换语言

this.$i18n.locale = 'en' // 切换英文

使用vue 国际化i18n 实现多实现语言切换功能