vue プロジェクトは多言語構成 (i18n) を使用します

序文

i18n, つまり、複数の言語の構成依存関係. これを使用すると、さまざまな国の人々が自分のプロジェクトを表示して、自分の国の言語に切り替えることが非常に便利です.
この wave は国際標準に準拠しています [like]
では、設定方法を教えてください

ステップ

まず、vue-i18n プラグインをインストールする必要があります。コマンドを使用します。

npm install vue-i18n --save

インストール。

---

vue-i18n プラグインを main.js に導入し、インスタンスを作成します。

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import messages from './i18n'

Vue.use(VueI18n)

const i18n = new VueI18n({
    
    
  locale: 'zh', // 默认语言
  messages, // 引入语言文件
  fallbackLocale: 'en' // 没有对应语言时的默认语言
})

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

---

その中で、メッセージはインポートされた言語ファイルであり、私たちがカスタマイズして
プロジェクトで新しく作成しmessages.js、次の形式に従います。

const messages = {
    
    
  en: {
    
    
    welcome: 'Welcome to Vue',
    home: 'Home',
    about: 'About',
    contact: 'Contact Us'
  },
  zh: {
    
    
    welcome: '欢迎使用Vue',
    home: '主页',
    about: '关于我们',
    contact: '联系我们'
  }
}

export default messages

ページで使用するには、次のように翻訳された場所で$tメソッドを使用する必要があります。

<template>
  <div>
    {
   
   {$t('welcome')}}
  </div>
</template>

注:welcome上記でmessages.jsカスタマイズした属性値です。

---

さらに、便利な言語切り替えを実現するために、ドロップダウン ボックスまたはボタンをコンポーネントに追加して言語を切り替え、 i18n.locale メソッドを介して言語を切り替えることができます。

<template>
  <div>
    <button @click="setLocale('en')">English</button>
    <button @click="setLocale('zh')">中文</button>
    {
   
   {$t('welcome')}}
  </div>
</template>

<script>
export default {
      
      
  methods: {
      
      
    setLocale (locale) {
      
      
      this.$i18n.locale = locale
    }
  }
}
</script>

上記のコードは、言語を切り替えるためにコンポーネントに 2 つのボタンを追加することを実装しています。ボタンクリック時に setLocale メソッドを呼び出し、i18n.locale の値を設定することで言語切り替えを実現できます。

エピローグ

上記は、vue プロジェクトの i18n を構成するプロセスです。