vue プロジェクトの国際化 vue-i18n のインストールと使用方法のチュートリアル

最近、Element-ui コンポーネント開発プロジェクトと組み合わせた Vue.js フレームワークの学習に出会いました。最近国際化機能を実装する必要があるため、次の記事では主に vue プロジェクトの国際化のための vue-i18n の使用に関する関連情報を紹介します。必要な方は参考にしてください。 。

はじめに

プロジェクトは複数の言語をサポートする必要があります。プロジェクトで使用される静的テキストを抽出し、言語パッケージを使用して管理する必要があります。言語設定を切り替えると、プロジェクト全体のテキスト表示が変更されます。自動的に切り替わります。

Vue プロジェクトに対応するコンポーネント vue-i18n があることがわかり、プロジェクトのコードをあまり変更しなかったので、このコンポーネントを使用してプロジェクト内のコードを変更しました。以下では多くを語る必要はありません。詳細な紹介を見てみましょう。

インストール

// script 引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

// npm 安装
npm install vue-i18n

// yarn 安装
yarn add vue-i18n

通常、プロジェクトはパッケージをインストールすることで実行され、スクリプトが導入されることはほとんどありません。

プロジェクトで

i18nを設定する

import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

const i18n = new VueI18n({
  local: 'cn', // 设置语言 
  messages // 语言包
})

new Vue({
  el: '#app',
  ...
  i18n
})

// messages 大概的使用格式
{
  cn: {
    name: '名字'
  },
  us: {
    name： 'Name'
  }
}

Use i18n

// html 需要使用 {{}} 将 name包装起来
{{$t('name')}}

// js
$t('name')

他にもいくつかの使用法があります例:

• さまざまな言語の場合、表示 さまざまな形式

• 表示を制御するためにカスタム変数が渡される場合

• ... 詳細については、公式ドキュメントを参照してください。

言語を切り替える場合は、組み込み変数を使用できます:

// 通过设置 locale 来切换语言
this.$i18n.locale = cn | us

プロジェクト内の元の静的テキストの生成と置換

このステップは最も重要で、すべてを抽出します出現する中国語の文字を $t('xxx') に置き換え、複数のバージョンの言語ファイルを維持します

これが言語パッケージの処理方法であり、プロジェクトの下に新しいディレクトリ language を追加します

--languages
  --lib
    -- cn.js // 中文语言包
    -- us.js // 英文语言包
    -- .. // 其他语言，暂未实践
  -- index.js // 导出语言包

cn。 js

export default {
  common: {
    message: '消息'
  },
  xxx: {
  }
}

us.js

export default {
  common: {
    message: 'Messages'
  },
  xxx: {
  }
}

index.js

import cn from './lib/cn.js'
export default {
  cn,
  us
}

置換テキスト

<template>
  ...
  <p>{{$t(&#39;message&#39;)}}</p>
  ...
</template>

上記は私が皆さんのためにまとめたものです。今後も皆様のお役に立ちますように。

関連記事:

JSで左のリストを右のリストに移動する機能を実装

JSでコンテキストパラメータの値をEL式を使って取得する方法

jQueryでテキストを実装1行以上、2行以上指定した行数で自動で省略記号を追加する方法

以上がvue プロジェクトの国際化 vue-i18n のインストールと使用方法のチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。