Vue2项目中使用i18n实现中英文切换

1、使用vue-i18n插件实现文本中英文国际化

1-1 安装插件(官网)

npm install vue-i18n@8 --save

1-2 配置中英文语言包

• 在src文件夹下创建一个语言包文件并将项目语言进行模块化处理

中英文语言包中的key值要对应，i18n会根据当前语言类型动态加载语言包，根据key值去取对应的文本

• en文件夹下home.js

export default {
  home: {
    webPage: 'WebPage',
    picture: 'Picture',
  }
}

• zh文件夹下home.js

export default {
  home:{
    webPage:'网页',
    picture:'图片'
  }
}

• en文件夹下的index.js

// 引入home页面英文语言
import home from './home'
export default {
  ...home
}

• zh文件夹下index.js

// 引入中文语言包
import home from './home'
export default {
  ...home
}

1-3 配置i18n并挂载到vue上

• 在src下新建一个config文件夹进行配置

1-3-1 配置信息

import Vue from 'vue'
// 引入i18n插件
import VueI18n from 'vue-i18n'
// 引入语言包
import enLocale from '@/local/en'
import zhLocale from '@/local/zh'
Vue.use(VueI18n)
const messages = {
  en: {
    ...enLocale,
  },
  zh: {
    ...zhLocale,
  }
}
// 配置i18n
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh', // 从缓存中获取当前的语言类型
  messages
})
export default i18n

1-3-2 main.js下进行注册

import Vue from 'vue'
import App from './App.vue'
import i18n from './config/i18n'
new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

1-4 Vue页面中使用i18n

1-4-1 模板中使用

<template>
  <div>
    {{$t('home.webPage')}}
  </div>
</template>

1-4-2 vue中使用【除props,beforeCreate钩子函数不能拿到this外】

 <template>
      <div>
        {{pageName}}
      </div>
</template>

<script>
export default {
  name: '',
  components:{},
  props:{},
  data(){
    return {
        pageName:this.$t('home.webPage')
    }
  },
  computed: {},
  created() {
  },
  mounted() {},
  methods: {
    handler(){
      this.$t('home.webPage')
    }
  },
}
</script>

1-5 props中或单独的js文件中（无法获取到Vue实例的时候）使用i18n

1-5-1 props中使用

• 引入配置的i18n配置对象
• 使用 t()方法

import i18n from '@/config/i18n'
export default {
  name: '',
  components:{},
      props:{
         placehodler:{
           type:String,
           default:i18n.t('home.webPage')
         }
      },
  }

1-5-2 js文件中使用

options.js

import i18n from '@/config/i18n'
export default [
  {
    label:i18n.t('home.webPage'),
    value:1
  }
]

app.vue

<template>
  <div>
    {{options[0].label}}
  </div>
</template>

<script>
import options from './options'
export default {
  name: '',
  components:{},
  props:{
  },
  data(){
    return {
        options
    }
  },
 }

1-6 利用Vue过滤器实现国际化

• 新建一个英文文本的Map文件

export default {
  "首页": "Home ",
 }

• 利用过滤器进行对中文文本的过滤展示

<template>
  <div>
    <span class="tab-text">{{moduleName | formatNav}}</span>
  </div>
</template>
// 英文菜单
import enNavTab from '@/local/enNavTabs.js'
<script>
export default {
  filters: {
    formatNav: (val) => {
      let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
      const lang = localStorage.getItem("_lang") ?? "zh";
      if (reg.test(val) && lang === "en") {
        return enNavTab[val] ?? "-";
      }
      return val;
    },
  },
};
</script>

2、Element-UI实现国际化

• 修改i18n配置增加element-ui国际化

import Vue from 'vue'
// 引入i18n插件
import VueI18n from 'vue-i18n'
// 引入语言包
import enLocale from '@/local/en'
import zhLocale from '@/local/zh'
// 引入element-ui语言包
import elementEn from 'element-ui/lib/locale/lang/en'
import elementZh from 'element-ui/lib/locale/lang/zh-CN'
// 下面不可少的两个配置【参考官网 按需加载里定制 i18n】
import ElementLocale from 'element-ui/lib/locale'
ElementLocale.i18n((key, value) => i18n.t(key, value))
Vue.use(VueI18n)
const messages = {
  en: {
    ...enLocale, // 本地文本语言包
    ...elementEn // element-ui语言包
  },
  zh: {
    ...zhLocale,
    ...elementZh
  }
}
// 配置i18n
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh', // 从缓存中获取当前的语言类型
  messages
})
export default i18n

3、vxeTable实现国际化

• 修改i18n配置文件添加vxeTable语言包

import Vue from 'vue'
// 引入i18n插件
import VueI18n from 'vue-i18n'
// 引入语言包
import enLocale from '@/local/en'
import zhLocale from '@/local/zh'
// 引入vxeTable语言包
import zhCNTable from 'vxe-table/lib/locale/lang/zh-CN'
import enUSTable from 'vxe-table/lib/locale/lang/en-US'
Vue.use(VueI18n)
// 配置国际化语言包
const messages = {
  en: {
    ...enLocale, // 本地文本语言包
    ...enUSTable, // 引入vuexTable语言
  },
  zh: {
    ...zhLocale,
    ...zhCNTable
  }
}
// 配置i18n
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh', // 从缓存中获取当前的语言类型
  messages
})
export default i18n

• 在main.js添加国际化函数

import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
// 下面不可少【参考vxeTable官网】
VXETable.setup({
  // 对组件内置的提示语进行国际化翻译
  i18n: (key, args) => i18n.t(key, args)
})

本地语言➕element-UI➕vxeTable全部配置国际化

• i18n配置文件

import Vue from 'vue'
// 引入i18n插件
import VueI18n from 'vue-i18n'
// 引入语言包
import enLocale from '@/local/en'
import zhLocale from '@/local/zh'
// 引入element-ui语言包
import elementEn from 'element-ui/lib/locale/lang/en'
import elementZh from 'element-ui/lib/locale/lang/zh-CN'
// 引入vxeTable语言包
import zhCNTable from 'vxe-table/lib/locale/lang/zh-CN'
import enUSTable from 'vxe-table/lib/locale/lang/en-US'
// 下面不可少的两个配置【参考官网 按需加载里定制 i18n】
import ElementLocale from 'element-ui/lib/locale'
ElementLocale.i18n((key, value) => i18n.t(key, value))
Vue.use(VueI18n)
// 配置国际化语言包
const messages = {
  en: {
    ...enLocale, // 本地文本语言包
    ...elementEn, // element-ui语言包
    ...enUSTable, // 引入vuexTable语言
  },
  zh: {
    ...zhLocale,
    ...elementZh,
    ...zhCNTable
  }
}
// 配置i18n
const i18n = new VueI18n({
  locale: localStorage.getItem('lang') || 'zh', // 从缓存中获取当前的语言类型
  messages
})
export default i18n

• main.js文件

import Vue from 'vue'
import App from './App.vue'
import i18n from './config/i18n'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
import VXETable from 'vxe-table'
import 'vxe-table/lib/index.css'
Vue.use(ElementUI)
Vue.use(VXETable)
// 下面不可少【参考vxeTable官网】
VXETable.setup({
  // 对组件内置的提示语进行国际化翻译
  i18n: (key, args) => i18n.t(key, args)
})
// 将Vue对象挂载到window对象上提供全局使用
new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')