vue 백그라운드 관리에 다중 언어 기능 추가의 실현 예시

이 회사의 한 항목은 영문 버전을 추가해야 하는데, 바로 중영 문화이다. 바로 코드를 붙인다

1. 우선 메인.js 페이지 설정

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) //  
const i18n = new VueI18n({
    //locale: 'zh-CN',    //  
    locale: 'Chinese',    //  
    //this.$i18n.locale //  locale 
    messages: {
      'Chinese': require('./common/lang/zh'),   //  
      'English': require('./common/lang/en')    //  
    },
    // 
    silentTranslationWarn: true
})

new Vue({
  el: '#app',
  router,
  i18n,
  components: { App },
  template: '<App/>'
})

2. 상응하는 경로 아래의 언어 패키지를 설정하고 여기에 일부 코드만 표시하며 필요한 것은 여기에 추가하면 된다

en.js
export const m = { 
    deviceCode: 'Device Code',// 
    deviceName: 'Device Name',// 
    deviceType: 'Device Type',// 
    denial: 'Denial',// 
    camera: 'Camera',// 
  } 

zh.js
export const m = {
  deviceCode: ' ',// 
  deviceName: ' ',// 
  deviceType: ' ',// 
  denial: ' ',// 
  camera: ' ',// 
}

3. 페이지에서 사용, 다른 곳에서 사용, 쓰기가 약간 다르다

（1）placeholder 
<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）table 

<el-table
    :data="tableData"
     stripe
 　　style="width: 100%;">
         <el-table-column
              prop="areaName"
              :label="$t('m.areaName')"
              width="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-dialog>
（4）js 

strHtml = strHtml + "<td>"+this.$i18n.t('m.deviceCode')+"：</td>";

이상은 vue 백그라운드 관리에 다중 언어 기능을 추가하는 실현 예시의 상세한 내용입니다. vue 백그라운드 관리에 다중 언어 기능을 추가하는 것에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!