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のサーバー環境をインストールして構築する

推薦する

TypeScript インターフェースの紹介

目次1. インターフェース定義2. 属性2.1 オプション属性2.2 読み取り専用プロパティ3. ク...

Docker 基本チュートリアル: Dockerfile 構文の詳細な説明

序文Dockerfile は Docker プログラムによって解釈されるスクリプトです。Docker...

jsはブラウザを閉じるときにアカウントのログアウトを処理します

目次古典的なアプローチ質問その他の質問注意が必要な問題古典的なアプローチご存知のとおり、アカウントの...

ROS2のインストールとdocker環境の使い方について

目次Docker を使用する理由は何ですか? DockerのインストールROSイメージを取得するRO...

Linux におけるゼロコピー技術の使用に関する簡単な分析

この記事では、Linux におけるいくつかの主要なゼロコピー テクノロジと、ゼロコピー テクノロジを...

Mysql論理アーキテクチャの詳細な説明

1. 全体的なアーキテクチャ図他のデータベースと比較すると、MySQL は、そのアーキテクチャがさま...

XHTML チュートリアル: Transitional と Strict の違い

実際、XHTML 1.0 は、Transitional DOCTYPE と Strict DOCTY...

ウェブサイトのパフォーマンス: 画像とCookieの最適化、モバイルアプリケーションの最適化

前のセクションでは、コンテンツ、サーバー、JavaScript、CSS など、Web サイトのパフォ...

JS でシングルトン モードを実装するための 6 つのソリューションの概要

序文今日は、デザインパターンのクリエーションパターンを見直していたところ、JS でシングルトンパター...

数千万のデータを扱うMySQLのページングクエリのパフォーマンスを最適化する

MySQL のデータ量が多い場合、制限ページングが使用されます。ページ数が増えると、クエリの効率が低...

Vue で変数式セレクターを実装する方法

目次HTML構造の定義入力タグのバインディング属性入力タグはキーダウンイベントをリッスンしますli ...

Centos6.5 の rpm パッケージから mysql5.7 をインストールするときに発生する初期化エラーの解決策

1. rzをサーバーにアップロードして解凍する rz [root@mini2 アップロード]# ta...

JS を使用してクリップボード内の Excel コンテンツを解析する方法

目次序文1. イベントとクリップボードを貼り付ける2. クリップボード内のコンテンツ形式3. HTM...

CSS で水平方向と垂直方向に中央揃えする 10 の方法を教えます (要約)

面接には必需品、仕事でも必ず使います。うーん、誰でも分かるでしょう。これ以上何も言わずに、要約とレン...

CentOS 7へのJenkinsのインストール手順の詳細な説明

Yum経由でJenkinsをインストールする1. インストール # yum ソースをインポート wg...