vue中使用国际化i8n切换语言

Bertha 。 2022-12-07 11:46 229阅读 0赞

1 安装依赖

//安装antd插件，这个跟i18n无关，写整体页面的时候用的这个插件
    npm install ant-design-vue --save-dev
    //安装i18n依赖
    npm install vue-i18n --save-dev

2 创建自己的国际语言文件  
（目录自己定义），文件里面要写的就是所有切换语言的时候要切换的词条  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70_pic_center]  
**en.js文件中内容**

const EN  = { 
        "测试moment插件": "test moment",
        "英文": 'English',
        "中文": 'Chinese'
    }
    
    export default EN

**zh.js中内容**

const ZH  = { 
        "测试moment插件": "测试moment插件",
        "英文": "英文",
        "中文": "中文"
    }
    
    export default ZH

3 在main.js中引用插件vue-i18n和语言文件并配置

//引入VueI18n
    import VueI18n from 'vue-i18n'
    //引入语言文件，目录啥的按照自己的目录来
    import ZH from './config/language/zh'
    import EN from './config/language/en'
    //使用antd组件写的，所以引入Antd，这个跟i18n没关系
    import Antd from 'ant-design-vue'
    //全局使用
    Vue.use(Antd)
    Vue.use(VueI18n)
    
    //开始配置
    /* I18N */
    const messages = { 
      ZH: ZH,
      EN: EN
    }
    // 判断浏览器的主体语言
    let language = window.navigator.language.toLocaleLowerCase().indexOf('zh') > -1 ? 'ZH' : 'EN';
    if (!localStorage.getItem('languageSetting')) { 
      localStorage.setItem('languageSetting', language);
    }
    
    // 使用
    const i18n = new VueI18n({ 
      local: localStorage.getItem('languageSetting'),
      messages
    })
    
    //注意，把i18n,写进去，不然不生效
    new Vue({ 
      router,
      i18n,
      render: h => h(App)
    }).$mount('#app')

4 在页面中使用

<template>
      <div>
      //产量也要加双括号，并且前面加$t
        div{ { $t('测试moment插件')}}</div>
        
        
        <a-dropdown :trigger="['click']">
          <a class="ant-dropdown-link">
          //这里$t代表的就是这个词要被转换
            { { $t(languageName)}}
            <a-icon type="down" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item
              v-for="item in languageList"
              :key="item.value"
              @click="setLanguage"
            >{ { $t(item.name)}}</a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </template>
    
    <script>
    export default { 
      name: "HelloWorld",
      components: { 
        
      },
      data() { 
        return { 
          languageList: [
            { 
              name: "中文",
              value: "ZH"
            },
            { 
              name: "英文",
              value: "EN"
            }
          ],
          languageName: "中文"
        };
      },
      created() { 
        // 初始化加载i18n，把浏览器默认语言设为默认显示语言
        this.$i18n.locale = localStorage.getItem('languageSetting');
        this.languageName = this.languageList.find(item => item.value == this.$i18n.locale).name
      },
      methods: { 
        // 点击切换语言
        setLanguage(e) { 
          this.$i18n.locale = e.key;
          localStorage.setItem("languageSetting", e.key);
          this.languageName = this.languageList.find(
            item => item.value == e.key
          ).name;
        }
      }
    };
    </script>
    
    <style scoped>
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hbzg3MTg2MzIyNA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/0fb7a1b9878a47a8824a9465b7cc57c7.png