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>\";

以上就是vue后台管理添加多语言功能的实现示例的详细内容，更多关于vue后台管理添加多语言功能的资料请关注其它相关文章！