vue-cli3实战-- 结合element-ui和vant框架实现国际化多语言切换

爱被打了一巴掌 2022-04-16 04:16 856阅读 0赞

有时我们在项目中会用到多个国家语言的切换，这时候我们就不能把内容写死了，而是借助工具实现语言的转换。

今天介绍的这个就是开源的 **vue-i18n ,**如何使用以及如何结合**element-ui**和**vant-ui**框架混合使用

首先，第一步我们要先学会在项目中如何去使用，才能进行下一步切换ui框架的内置语言，后边会以**element-ui**和**vant ui**两个ui框架为例

安装：

npm i vue-i18n -S

在assets项目下写了几个js文件，cn.js是英文，en.js是中文，index.js是输出文件，vantLocal.js是专门为**vant ui**切换语言的方法（一个练习中英文切换的demo，更多语言请自行配置）

![20181116171436288.png][]

en.js

const message =  {
        hello: 'hello',
        about: 'about',
        welcome: "Welcome"
      }
      export default message;

cn.js

const message =  {
        hello: '你好',
        about: '关于',
        welcome: "欢迎"
      }
    export default message;

index.js

import en from './en'
    import cn from './cn'
    const messages = {
        en: {
            message:en
        },
        zhCHS: {
            message:cn
        }
    }
    export default messages;

vantLocal.js

import { Locale } from 'vant';
    import enUS from 'vant/lib/locale/lang/en-US';
    import zhCN from 'vant/lib/locale/lang/zh-CN';
    export function Locals(a){
        if(a == 'en'){
            Locale.use('en', enUS);
        }else if(a == 'zhCHS'){
            Locale.use(a, zhCN);
        }
    }

在main.js中使用（自行引入其他的**Vu**e,**element-ui**,**vant**等组件，这里为了方便观察，只写了核心代码）

import VueI18n from 'vue-i18n'
    Vue.use(VueI18n)
    const i18n = new VueI18n({
      //定义默认语言
      locale: 'en', 
      messages
    })
    
    locale.i18n((key, value) => i18n.t(key, value)) //方便element使用，其内部封装也是采用的i18n
    /*vue上挂在vant i18n方法*/
    import {Locals} from './assets/lang/vantLocal.js'
    Vue.prototype.$Local = Locals
    
    new Vue({
      router,
      store,
      i18n,
      render: h => h(App)
    }).$mount('#app')

在vue结构中：

直接通过**\{ \{$t(...)\}\}**

在js中通过**this.$("...")**获取值

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <button @click="cn">切换中文</button>
        <button @click="en">切换英文</button>
        h3 {
       { $t("message.hello") }}
        <h1>{
       {$t('message.welcome')}}</h1>
        <div @click="top">饿了么测试</div>
        <demo></demo>
        
        <van-datetime-picker
      v-model="currentDate"
      type="datetime"
      :min-date="minDate"
      :max-date="maxDate"
    />
      </div>
    </template>
    
    <script>
    import demo from './home-demo'
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data(){
        return{
    
          minHour: 10,
           maxHour: 20,
           minDate: new Date(),
           maxDate: new Date(2019, 10, 1),
           currentDate: new Date()
        }
      },
      methods:{
        cn(){
          this.$i18n.locale='zhCHS'
          this.$Local('zhCHS')
        },
        en(){
          this.$i18n.locale='en'
          this.$Local('en')
        },
        top(){//element-ui的弹窗组件
          this.$alert(this.$t('message.welcome'),this.$t('message.welcome'), {
            confirmButtonText: this.$t('message.welcome')
          });
        }
      },
      components:{
        demo
      }
    }
    </script>

一起看下结果

中文：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70][]

英文：（为了便于观察，窗口的位置上调，能看到切换的按钮）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70 1][]

[20181116171436288.png]: /images/20220416/7e12aa34adc445309f55121acb7480fa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70]: /images/20220416/bd66613d5308435592f3049418f5148e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNTEzODgx_size_16_color_FFFFFF_t_70 1]: /images/20220416/5d6da471237b40e497f3226bdd7d2bc4.png