vue-i18n を使用して中国語と英語を切り替えます-jsチュートリアル-php.cn

vue-i18n を使用して中国語と英語を切り替えます

不言

リリース： 2018-07-04 11:31:33

オリジナル

1493 人が閲覧しました

この記事では、vue-i18n を使用して中国語と英語を切り替える効果を主に紹介します。非常に優れており、必要な友人は参照できます。

vue-i18n 倉庫のアドレス: https://github. com/kazupon/ vue-i18n

互換性:

Vue.js 2.x 以降をサポート

インストール方法: (ここでは npm のみを示します)

npm install vue-i18n

ログイン後にコピー

使用方法:

1. js vue-i18n を導入します (vue を先に導入することが前提です)

import VueI18n from &#39;vue-i18n&#39;
Vue.use(VueI18n)

ログイン後にコピー

2. ローカル翻訳情報を準備します

const messages = {
 zh: {
  message: {
  hello: &#39;好好学习，天天向上！&#39;
  }
 },
 en: {
  message: {
  hello: &#39;good good study, day day up!&#39;
  }
 }
}

ログイン後にコピー

3. オプションを使用して VueI18n インスタンスを作成します

const i18n = new VueI18n({
 locale: &#39;en&#39;, // 语言标识
 messages
})

ログイン後にコピー

4. vue ルートインスタンスに i18n をマウントします

const app = new Vue({
 router,
 i18n,
 ...App
}).$mount(&#39;#app&#39;)

ログイン後にコピー

5. HTML テンプレートで

<p id="app">
 <h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
 </p>

ログイン後にコピー

を使用して実行効果を確認します:

選択した言語識別子は "en" 英語ですが、今度はそれを "zh" 中国語に変更して、効果を確認してください

const i18n = new VueI18n({
 locale: &#39;zh&#39;, // 语言标识
 messages
})

ログイン後にコピー

このようにして、実際の開発では、対応する言語の情報を別の json オブジェクト

const i18n = new VueI18n({
 locale: &#39;en&#39;, // 语言标识
 messages: {
  &#39;zh&#39;: require(&#39;./common/lang/zh&#39;),
  &#39;en&#39;: require(&#39;./common/lang/en&#39;)
 }
})

ログイン後にコピー

zh.js

// 注意：一定是 exports，不是 export，否则会报错，报错信息是下列的中的内容不是 string
module.exports = {
 message: {
  title: &#39;运动品牌&#39;
 },
 placeholder: {
  enter: &#39;请输入您喜欢的品牌&#39;
 },
 brands: {
  nike: &#39;耐克&#39;,
  adi: &#39;阿迪达斯&#39;,
  nb: &#39;新百伦&#39;,
  ln: &#39;李宁&#39;
 }
}

ログイン後にコピー

en.js

module.exports = {
 message: {
  title: &#39;Sport Brands&#39;
 },
 placeholder: {
  enter: &#39;Please type in your favorite brand&#39;
 },
 brands: {
  nike: &#39;Nike&#39;,
  adi: &#39;Adidas&#39;,
  nb: &#39;New Banlance&#39;,
  ln: &#39;LI Ning&#39;
 }
}

ログイン後にコピー

として保存することができるはずです。

次に、HTML テンプレートで使用する場合は、js での国際的な記述に特に注意してください

// HTML
<p id="app">
 <p style="margin: 20px;">
  <h1>{{$t("message.title")}}</h1>
  <input style="width: 300px;" class="form-control" :placeholder="$t(&#39;placeholder.enter&#39;)">
  <ul>
  <li v-for="brand in brands">{{brand}}</li>
  </ul>
 </p>
</p>
// JS
data () {
 return {
  brands: [this.$t(&#39;brands.nike&#39;), this.$t(&#39;brands.adi&#39;), this.$t(&#39;brands.nb&#39;), this.$t(&#39;brands.ln&#39;)]
 }
 },

ログイン後にコピー

コンパイル効果を表示します:

ここで英語に変更します:

上記の操作では、すべて手動でパスしました。実際には、ブラウザが言語を自動的に認識するように変更します。ここでは、Cookie を読み取るための新しい cookie.js ファイルを作成します

function getCookie(name,defaultValue) {
 var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
 if (arr = document.cookie.match(reg))
 return unescape(arr[2]);
 else
 return defaultValue;
}
export {
 getCookie
}

ログイン後にコピー

2。この JS を導入し、PLAY_LANG 属性を通じてブラウザの言語を取得します

const i18n = new VueI18n({
 locale: getCookie(&#39;PLAY_LANG&#39;,&#39;zh&#39;), // 语言标识
 messages: {
  &#39;zh&#39;: require(&#39;./common/lang/zh&#39;),
  &#39;en&#39;: require(&#39;./common/lang/en&#39;)
 }
})

ログイン後にコピー

ここで非常にエラーが発生しやすい 2 つの場所に注意する必要があります:

(1)、$t() を $() として記述します

(2) json では、同じオブジェクト内に同じ名前の属性が存在します。

vue-i18n には、locale というグローバル設定パラメータがあり、locale の値を変更することで、異なる言語を切り替えることができます。以下の

このケースは Element UI のポップアップウィンドウスタイルを借用しています。上記の手順は詳細には説明しません。

// template
<h2>{{$t(&#39;test&#39;)}}</h2>
<button type="button" class="btn btn-success" @click="changeLocale">中文/EN</button>  

// js方法
changeLocale () {
 this.$confirm(this.$t(&#39;layer.toggle&#39;), this.$t(&#39;layer.tips&#39;), {
  confirmButtonText: this.$t(&#39;button.ok&#39;),
  cancelButtonText: this.$t(&#39;button.cancel&#39;),
  type: &#39;warning&#39;
  }).then(() => {
   let locale = this.$i18n.locale
   locale === &#39;zh&#39; ? this.$i18n.locale = &#39;en&#39; : this.$i18n.locale = &#39;zh&#39;
  }).catch(() => {
    this.$message({
     type: &#39;info&#39;,
     })  
  })
},

ログイン後にコピー

効果:

上記は、この記事の全内容が皆さんの学習に役立つことを願っています。関連コンテンツについては、PHP 中国語 Web サイトに注目してください。