隨著國際化的趨勢，項目中配置多語言切換也越來越有必要边篮，本篇文章將會介紹如何在vue項目中配置多語言化

• 安裝：

  npm i vue-i18n
  

• 導入注冊：(因為后續(xù)可能涉及很多配置翻譯幢码，所以我們提前把配置抽離為單獨的文件)

  // 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: 'コーラ',
      },
  };
  
  // 通過選項創(chuàng)建 VueI18n 實例
  const i18n = new VueI18n({
      locale: 'zn', // 設置默認地區(qū)
      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 時區(qū)，即可做到語言切換（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

哈哈闹啦，樣式比較丑，到時候可以根據(jù)項目設計自己做調(diào)整辕坝。

以上即為在普通的vue項目中實現(xiàn)多語言化的效果窍奋。

如有問題，請指出酱畅，接受批評琳袄。

期待能夠?qū)δ阌兴鶐椭鷡

QQ圖片20210513201556.gif