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

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 页面使用组件

 4.2 替换页面中的字段

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

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

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

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