Example of adding multi-language function to Vue background management

1. First, configure the main.js page
2. Configure the language pack under the corresponding path. Only part of the code is displayed here. Just add what you need here.
3. Used in different places on the page, the writing method is slightly different

In this company, a project needs to add an English version, that is, Chinese and English culture, directly on the code

1. First, configure the main.js page

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) // Mount as a plug-in const i18n = new VueI18n({
    //locale: 'zh-CN', // language identifier locale: 'Chinese', // language identifier //this.$i18n.locale // Language switching by switching the value of locale messages: {
      'Chinese': require('./common/lang/zh'), // Chinese language package 'English': require('./common/lang/en') // English language package},
    //Hide warning silentTranslationWarn: true
})

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

2. Configure the language pack under the corresponding path. Only part of the code is displayed here. Just add what you need here.

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

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

3. Used in different places on the page, the writing method is slightly different

(1) How to write placeholder and button <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) How to write 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) Subcomponent pop-up box writing method <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) String concatenation in js: strHtml = strHtml + "<td>"+this.$i18n.t('m.deviceCode')+"：</td>";

The above is the details of the implementation example of adding multi-language function to Vue background management. For more information about adding multi-language function to Vue background management, please pay attention to other related articles on 123WORDPRESS.COM!

You may also be interested in:

Using vue-i18 plug-in in Vue to realize multi-language switching function
Combining vue and vue-i18n to realize multi-language switching of background data
How to use vue-i18n to achieve multi-language switching effect
Ideas for implementing multi-language switching in Vue projects
Ideas and practice of multi-language solution for Vue.js front-end project

<<: How to insert batch data into MySQL database under Node.js

>>: Install and build a server environment of PHP+Apache+MySQL on CentOS