“携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第1天，点击查看活动详情”

Vue2项目中的多语言---vue-i18n插件实现

实现的条件（原理）

1、语言标识符

2、中英文对照字典表

3、翻译官 -- 根据文字标识符找到对应的语言文字并反返回

示例步骤：

1、声明相关变量

语言标识符 lang:'en'/ zh

中英文对照表

 messages:{
     zh:{
         morning:'早上好'
     },
     en:{
        morning:'Good morning'
     }    
 }

2、封装函数，充当翻译官 t

 t(str){
     const curLang = this.messages[this.lang]
     return curLang[str] || str
 }

3、使用函数，传入文字的标识符 t('morning')

vue-i18n插件实现

npm下载

npm i vue-i18n@8（最新版本不支持Vue2）

基本使用

需要单独一个多语言的实例化文件 `src/lang/index.js`

引入注册并导出实例化插件对象

 import Vue form 'vue'
 import VueI18n from 'vue-i18n'
 
 // 注册
 Vue.use(VueI18n)
 
 // 实例化插件
 export default new VueI18n() // 里面传入对象

在 `main.js`中引入自己封装的，并注入到 Vue实例中

 import i18n from './lang/index'
 
 // 注入到 Vue实例中
 new Vue({ i18n })

3、i18n的自定义字典表的使用

实例化插件的时候传入对象，对象中声明语言标识符以及中英文对照字典表

 // src/lang/index.js
 import Vue from 'vue' // 引入 Vue
 import VueI18n from 'vue-i18n' // 引入国际化的包
 import customZH from './zh' 
 // 引入自定义中文对照包 export default{ route:{users: '用户'...}, navbar:{}...}
 
 import elementEN from 'element-ui/lib/locale/lang/en' // 引入饿了么的英文包
 
 import elementZH from 'element-ui/lib/locale/lang/zh-CN' // 引入饿了么的中文包
 
 export default new VueI18n({
  locale: localStorage.getItem('lang') || 'zh'
  // 从 localStorage 中获取语言类型 获取不到就是中文
  messages: {
   en: {
     ...elementEN, // 将饿了么的英文语言包引入
     ...customEN
   },
   zh: {
     ...elementZH, // 将饿了么的中文语言包引入
     ...customZH
     }
   }
 })

elementUI的国际化使用

注册elementUI的时候注入i18n配置项

 // main.js
 Vue.use(ElementUI,{
     i18n:(key,value) => i18n.t(key,value)
 })

利用插件提供的 $t 函数，实现中英文切换
- $t(route.users)

封装独立的中英文转换组件 componets/lang/index.vue

 <template>
   <el-dropdown trigger="click" @command="changeLanguage">
     <!-- 这里必须加一个 div -->
     <div>
       <svg-icon style="color: #fff; font-size: 20px" icon-class="language" />
     </div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item command="zh" :disabled="'zh' === $i18n.locale">中文</el-dropdown-item>
       <el-dropdown-item command="en" :disabled="'en' === $i18n.locale">en</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
 
 <script>
 export default {
   methods: {
     changeLanguage(lang) {
       localStorage.setItem('lang', lang)
       this.$i18n.locale = lang // 设置给本地的 i18n 插件
       this.$message.success('切换多语言成功')
     }
   }
 }
 </script>

全局注册

 // main.js
 import Lang from '@/componets/lang/index.vue'
 Vue.component('Lang',Lang)

使用多语言组件

<Lang/>

Vue2项目中的多语言---vue-i18n插件的使用