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

'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/>'
})

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

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

（１）プレースホルダーとボタンの書き方 <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>

（３）サブコンポーネントポップアップボックスの記述方法 <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>";