vue多语言化

随着国际化的趋势，项目中配置多语言切换也越来越有必要，本篇文章将会介绍如何在vue项目中配置多语言化

• 安装：

  npm i vue-i18n
  

• 导入注册：(因为后续可能涉及很多配置翻译，所以我们提前把配置抽离为单独的文件)

  // src/plugins/VueI18n/index.js：
  import Vue from 'vue';
  import VueI18n from 'vue-i18n';
  Vue.use(VueI18n);
  
  // 定义各语言的配置
  const messages = {
      zn: {
          message: {
              hello: '你好，世界',
          },
          name: '可乐',
      },
      en: {
          message: {
              hello: 'hello world',
          },
          name: 'cola',
      },
      ja: {
          message: {
              hello: 'こんにちは、世界',
          },
          name: 'コーラ',
      },
  };
  
  // 通过选项创建 VueI18n 实例
  const i18n = new VueI18n({
      locale: 'zn', // 设置默认地区
      messages, // 设置配置信息
  });
  
  export default i18n;
  

• vue实例绑定i18n：

  // src/main.js
  import i18n from './plugins/VueI18n/index';
  
  new Vue({
      router,
      store,
      i18n,
      render: h => h(App),
  }).$mount('#app');
  

• vue文件中使用(插值表达式使用 i18n.locale 时区，即可做到语言切换（chooesLange方法）
  插值表达式使用 $t('xx') 写法，xx即为messages配置中的字段

  <template>
      <div class="about">
          <h1>{{ $t('message.hello') }}</h1>
          <h1>{{ $t('name') }}</h1>
          
          <div class="mt-6">
              <p @click="isChoose = true" style="cursor:point">请选择语言</p>
              <ul v-if="isChoose">
                  <li v-for="(item, index) in languages" :key="index" @click="chooesLange(item[0])">{{ item[1] }}</li>
              </ul>
          </div>
      </div>
  </template>
  
  <script>
  export default {
      data() {
          return {
              languages: new Map([
                  ['zn', '中文'],
                  ['en', 'English'],
                  ['ja', '日本语'],
              ]),
              isChoose: false,
          };
      },
      methods: {
          chooesLange(languageItem) {
              this.$i18n.locale = languageItem;
              this.isChoose = false;
          },
      },
  };
  </script>
  
  <style scoped>
  p,
  ul {
      cursor: pointer;
  }
  </style>
  

• 效果：

  
  GIF.gif

哈哈，样式比较丑，到时候可以根据项目设计自己做调整。

以上即为在普通的vue项目中实现多语言化的效果。

如有问题，请指出，接受批评。

期待能够对你有所帮助~

QQ图片20210513201556.gif