i18n 配置vue项目中英文语言包（中英文转化）

一、实现效果

二、下载插件创建文件夹

2.1 下载cookie来存储

npm install --save js-cookie

npm i vue-i18n -S

2.2 封装组件多页面应用

2.3 创建配置语言包字段

 三、示例代码

 3.1 main.js 引用 i18n.js

import i18n from './lang'

// 实现语言切换:i18n处理element，根据locale属性去寻找显示内容
Vue.use(Element, {
  i18n: (key, value) => i18n.t(key, value),
})

new Vue({
  i18n,
  render: (h) => h(App),
})

 3.2 封装组件：src\components\LangSelect\index.vue

<template>
  <el-dropdown trigger="click" @command="handleSetLanguage">
    <div>
      <div class="lang_img">
        <img src="@/assets/ch-en.png" alt="语言切换" title="语言切换" />
      </div>
    </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">
        English
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  import Cookies from 'js-cookie'
  export default {
    methods: {
      // 中英文语言切换
      handleSetLanguage(lang) {
        Cookies.set('language', lang) // 切换多语言
        this.$i18n.locale = lang // 设置给本地的i18n插件
        this.$message({
          message: this.$t('public.switch'),
          type: 'success',
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .lang_img {
    margin-right: 10px;
    cursor: pointer;
    img {
      width: 25px;
      height: 25px;
    }
  }
</style>

3.3 导入配置的字段：src\lang\index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN' // element-ui lang
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import zhLocale from './zh'
import enLocale from './en'

Vue.use(VueI18n)

export default new VueI18n({
  locale: Cookies.get('language') || 'zh', // 从cookie缓存中获取语言类型 获取不到就是中文
  messages: {
    en: {
      ...enLocale, // 引入英文语言包
      ...elementEnLocale, // 引入自定义的语言包
    },
    zh: {
      ...zhLocale, // 引入中文语言包
      ...elementZhLocale,
    },
  },
})

3.4 中文字段：src\lang\zh.js

export default {
  index: '首页',
  helpmenu: '帮助', 
  public: {
    MoreActions: '更多操作',
    CloseAll: '关闭所有',
    switch: '切换语言成功',
  },
}

3.5 英文字段：src\lang\en.js

export default {
  index: 'Home',
  helpmenu: 'Help Menu', 

  public: {
    MoreActions: 'More Actions ', 
    CloseAll: 'Close All',
    switch: 'Successfully Switched Language',
  },
}

zh.js和en.js中的变量名称要对应起来

四、使用语言包功能

4.1 页面使用组件

<template>
  <div>
    <LangSelect /> // 使用
  </div>
</template>

<script>
  import LangSelect from '@/components/LangSelect'  // 导入
  export default { 
    components: {   // 注册
      LangSelect, 
    },
  }
</script>

 4.2 替换页面中的字段

1、{{$t('index')}}

2、:placeholder="$t('public.switch')"

3、:label="$t('public.switch')"

4、message: this.$t('public.switch'),