Vueバックグラウンド管理に多言語機能を追加する例

Vueバックグラウンド管理に多言語機能を追加する例

この会社では、プロジェクトはコードに直接英語版、つまり中国語と英語の文化を追加する必要がある。

1.まず、main.jsページを設定します

'vue-i18n' から VueI18n をインポートします
Vue.use(VueI18n) // プラグインとしてマウント const i18n = new VueI18n({
    //locale: 'zh-CN', // 言語識別子 locale: 'Chinese', // 言語識別子 //this.$i18n.locale // ロケールメッセージの値の切り替えによる言語の切り替え: {
      'Chinese': require('./common/lang/zh'), // 中国語言語パッケージ 'English': require('./common/lang/en') // 英語言語パッケージ},
    //警告を非表示 silentTranslationWarn: true
})

新しいVue({
  el: '#app',
  ルーター、
  国際化、
  コンポーネント: { アプリ },
  テンプレート: '<App/>'
})

2. 対応するパスの下で言語パックを構成します。ここにはコードの一部のみが表示されます。必要なものだけをここに追加してください。

ja.js より
エクスポートconst m = { 
    deviceCode: 'デバイス コード', //デバイス コード deviceName: 'デバイス名', //デバイス名 deviceType: 'デバイス タイプ', //デバイス タイプ denial: '拒否', //拒否 camera: 'カメラ', //カメラ} 

js の翻訳
エクスポートconst m = {
  deviceCode: 'デバイス コード', //デバイス コード deviceName: 'デバイス名', //デバイス名 deviceType: 'デバイス タイプ', //デバイス タイプ denial: '拒否', //拒否 camera: 'カメラ', //カメラ}

3. ページ上の異なる場所で使用され、書き方も若干異なります

(1)プレースホルダーとボタンの書き方 <el-row :gutter="30">
    <el-col :span="4">
        <div class="grid-content bg-purple">
              <el-input v-model="value0" :placeholder="$t('m.placeOne')"></el-input>
         </div>
     </el-col>
      <el-col :span="8">
         <div class="grid-content bg-purple">
              <el-button @click="searchData()" type="primary" icon="el-icon-search">{{ $t('m.query') }}</el-button> 
              <el-button @click="dialogVisible = true" type="warning">{{ $t('m.AddDevice') }}</el-button>
          </div>
    </el-col>
</el-row> (2) 表の書き方 <el-table
    :data="テーブルデータ"
     ストライプ
   スタイル="幅: 100%;">
         <el-テーブル列
              prop="エリア名"
              :label="$t('m.areaName')"
              幅="100">
          </el-table-column>
</el-table>

(3)サブコンポーネントポップアップボックスの記述方法 <el-dialog :title="$t('m.Ediedevice')" :visible.sync="dialogVisibles" width="30%" :before-close="handleClose" :close-on-click-modal=false>
     <edit-equipment @subsuccess="subsuccess" :editDate="editDate" style="overflow: hidden;"></edit-equipment>
 </el-ダイアログ>
(4) js での文字列連結: strHtml = strHtml + "<td>"+this.$i18n.t('m.deviceCode')+":</td>";

以上がVueバックグラウンド管理に多言語機能を追加する実装例の詳細です。Vueバックグラウンド管理に多言語機能を追加する詳細については、123WORDPRESS.COMの他の関連記事に注目してください。

以下もご興味があるかもしれません:
  • Vue の vue-i18 プラグインを使用して多言語切り替え機能を実現する
  • vueとvue-i18nを組み合わせてバックグラウンドデータの多言語切り替えを実現する
  • vue-i18n を使用して多言語切り替え効果を実現する方法
  • Vue プロジェクトで多言語切り替えを実装するためのアイデア
  • Vue.js フロントエンドプロジェクト向け多言語ソリューションのアイデアと実践

<<:  Node.js で MySQL データベースにバッチデータを挿入する方法

>>:  CentOSにPHP+Apache+MySQLのサーバー環境をインストールして構築する

推薦する

HTML でカスタム画像を使用してチェックボックスを表示する方法

チェックボックスの使用を実装するために画像を使用する必要がある場合は、それを使用して実装できます。実...

SpringBoot プロジェクトの Docker 環境を実行するときに発生する無限再起動問題の詳細な説明

もしかしたら私の考え方が間違っていたのかもしれないし、問題の説明が少し乱雑だったのかもしれないが、こ...

関数の分類の詳細な説明とJavascriptでのこのポイントの例

JS で関数を定義する 3 つの方法例を挙げて説明しましょう。 <スクリプト> //メソ...

Vue はシームレスなカルーセル効果 (マーキー) を実現します

この記事では、シームレスなカルーセル効果を実現するためのVueの具体的なコードを例として紹介します。...

Vueのドラッグ可能なコンポーネントであるVue Smooth DnDの使用方法の詳細な説明

目次紹介とデモAPI: コンテナ財産ライフサイクルコールバックイベントAPI: ドラッグ可能実際の戦...

reduxの動作原理と使い方の説明

目次1. redux とは何ですか? 2. 還元の原則3. redux の使い方は? (1)redu...

Vue の共通 A​​PI と高度な API の概要

目次次のチェックミックスイン$強制更新設定、削除フィルター指令その他の単純な共通プロパティとメソッド...

ネイティブ CSS で無限テキストカルーセルを実装する一般的な方法

テキストカルーセルは私たちの日常生活で非常に一般的です。スーパーマーケットや実店舗の入り口には、テキ...

Dockerを使用してJenkinsをインストールする方法

目次1. イメージをプルする2. ローカルデータボリュームを作成する3. コンテナを作成する4. J...

MySQL の遅いクエリを見つける方法

序文誰もが日常業務で SQL の最適化を経験したことがあると思います。したがって、最適化の前に、遅い...

MySQL に IP アドレスを効果的に保存する方法と、文字列 IP と数値を変換する方法の詳細な説明

High Performance MySQL バージョン 3 (セクション 4.1.7) を見ると、...

Docker コンテナ データ ボリュームの名前付きマウントと匿名マウントの問題

目次コンテナデータボリュームとはコンテナ データ ボリュームが必要なのはなぜですか?使用データボリュ...

MySQLは効率的なインデックス例分析を確立する

この記事では、例を使用して、MySQL で効率的なインデックスを作成する方法について説明します。ご参...

ダウンロードにおすすめの氷と雪のフォント 33 種類 (個人用および商用)

01 ウィンターフレーク(個人のみ) 02 スノートップキャップ(業務用) 03 モディウス「フリ...