vue后台管理添加多语言功能的实现示例_vue.js

vue后台管理添加多语言功能的实现示例

2022-03-07 15:55武向前 vue.js

这篇文章主要介绍了vue后台管理添加多语言功能的实现示例，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下

1.首先是main.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>";