国际化实现（五）

国际化支持

1.安装依赖

执行以下命令，安装 i18n 依赖。

npm install vue-i18n --save

2.添加配置

2.1 在 src 下新建 i18n 目录，并创建一个 index.js。

index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)
 
// 注册i18n实例并引入语言文件，文件格式等下解析
const i18n = new VueI18n({
  locale: 'zh_cn',
  messages: {
    'zh_cn': require('@/assets/languages/zh_cn.json'),
    'en_us': require('@/assets/languages/en_us.json')
  }
})

export default i18n

2.2 在 assets 目录下面创建连个多语言文件。

zh_cn.json

{
    "common": {
        "home": "首页",
        "login": "登录",
        "logout": "退出",
        "doc": "文档",
        "msgCenter": "消息中心",
        "myMsg": "我的消息",
        "config": "配置",           
        "exit": "退出"
    },
    "sys": {
        "sysMng": "系统管理",
        "userMng": "用户管理",
        "deptMng": "机构管理",
        "roleMng": "角色管理",
        "menuMng": "菜单管理",
        "logMng": "日志管理",
        "sysMonitor": "系统监控"
    }
}

en_us.json

{
    "common": {
        "home": "Home",
        "login": "Login",
        "logout": "Logout",
        "doc": "Document",
        "msgCenter": "Message Center",
        "myMsg": "My Message",
        "config": "Config",
        "exit": "Exit"
    },
    "sys": {
        "sysMng": "System Manage",
        "userMng": "User Manage",
        "deptMng": "Dept Manage",
        "roleMng": "Role Manage",
        "menuMng": "Menu Manage",
        "logMng": "Log Manage",
        "sysMonitor": "System Monitor"
    }
}

2.3 在 main.js 中引入 i18n 并注入到 vue 对象中。

import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import api from './http/index'
import i18n from './i18n'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(api)

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

3.字符引用

在原本使用字符串的地方，引入国际化字符串。

把原本的“用户管理”、“菜单管理”等字符串换成如下格式引入。

3.切换菜单

在用户信息前边添加一个用于语言切换的菜单，用于切换不同的语言。

菜单语言切换的时候，修改国际化的设置

给相关参数初始值

 

Home.vue代码

<template>
    <el-row class="container">
        <el-col :span="24" class="header">
            <el-col :span="5" class="logo" :class="isCollapse?'logo-collapse-width':'logo-width'">
        <img :src="this.logo" /> {{isCollapse?sysName:sysName}}
            </el-col>
            <el-col :span="1">
                <div class="tools" @click.prevent="collapse">
                    <i class="el-icon-menu"></i>
                </div>
                    <!-- <i class="fa fa-align-justify"></i> -->
            </el-col>
            <el-col :span="13">
                <div class="hearNavBar">
          <el-menu :default-active="activeIndex" class="el-menu-demo" background-color="#4b5f6e" text-color="#fff"
              active-text-color="#ffd04b" mode="horizontal" @select="handleSelectHearNavBar">
            <el-menu-item index="1">首页</el-menu-item>
            <el-menu-item index="2">消息中心</el-menu-item>
            <el-menu-item index="3">订单管理</el-menu-item>
          </el-menu>
                </div>
            </el-col>
            <el-col :span="5" class="userinfo">
              <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link lang-inner">
            <span id="language">中文</span><i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="zh_cn:中文">中文</el-dropdown-item>
            <el-dropdown-item command="en_us:English">English</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
                <el-dropdown trigger="hover">
                    <span class="el-dropdown-link userinfo-inner"><img :src="this.userAvatar" /> {{username}}</span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>我的消息</el-dropdown-item>
                        <el-dropdown-item>设置</el-dropdown-item>
                        <el-dropdown-item divided @click.native="logout">退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-col>
        <el-col :span="24" class="main">
            <aside class="aside">
                <!--导航菜单-->
        <el-menu default-active="1-3" class="el-menu-vertical-demo" @open="handleopen" @close="handleclose" @select="handleselect" :collapse="isCollapse">
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">系统管理</span>
            </template>
            <el-menu-item index="1-1" @click="$router.push('user')">{{$t("sys.userMng")}}</el-menu-item>
            <el-menu-item index="1-2" @click="$router.push('dept')">{{$t("sys.deptMng")}}</el-menu-item>
            <el-menu-item index="1-3" @click="$router.push('role')">{{$t("sys.roleMng")}}</el-menu-item>
            <el-menu-item index="1-4" @click="$router.push('menu')">{{$t("sys.menuMng")}}</el-menu-item>
            <el-menu-item index="1-5" @click="$router.push('log')">{{$t("sys.logMng")}}</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
             <template slot="title">
              <i class="el-icon-location"></i>
              <span slot="title">系统监控</span>
              </template>
            <el-menu-item index="2-1" @click="$router.push('user')">服务监控</el-menu-item>
            <el-menu-item index="2-2" @click="$router.push('menu')">任务监控</el-menu-item>
          </el-submenu>
          <el-menu-item index="3" disabled>
            <i class="el-icon-document"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航四</span>
          </el-menu-item>
        </el-menu>
            </aside>
            <section class="content-container">
                <div class="grid-content bg-purple-light">
                    <el-col :span="24" class="breadcrumb-container">
                        <el-breadcrumb separator="/" class="breadcrumb-inner">
                            <el-breadcrumb-item v-for="item in $route.matched" :key="item.path">
                                {{ item.name }}
                            </el-breadcrumb-item>
                        </el-breadcrumb>
                    </el-col>
                    <el-col :span="24" class="content-wrapper">
                        <transition name="fade" mode="out-in">
                            <router-view></router-view>
                        </transition>
                    </el-col>
                </div>
            </section>
        </el-col>
    </el-row>
</template>

<script>
import axios from 'axios'
import mock from '@/mock/index.js';
export default {
  name: 'Home',
  data() {
    return {
      isCollapse: false,
      sysName: "kitty",
      username: "Louis",
      userAvatar: "",
      logo: "",
      activeIndex: '1'
    };
  },
  methods:{
       handleopen() {
      console.log('handleopen');
      },
      handleclose() {
        console.log('handleclose');
      },
      handleselect(a, b) {
        console.log('handleselect');
      },
      handleSelectHearNavBar(key, keyPath) {
        console.log(key, keyPath)
      },
      //折叠导航栏
      collapse: function() {
        this.isCollapse = !this.isCollapse;
      },
      //语言切换
      handleCommand(command) {
      let array = command.split(':')
      let lang = array[0] === '' ? 'zh_cn' : array[0]
      let label = array[1]
      document.getElementById("language").innerHTML = label
      this.$i18n.locale = lang
      },
      //退出登录
      logout: function() {
        var _this = this;
        this.$confirm("确认退出吗?", "提示", {
          type: "warning"
        })
          .then(() => {
            sessionStorage.removeItem("user");
            this.$router.push("/login");
          })
          .catch(() => {});
      }
  },
  mounted(){
    this.sysName = "I like Kitty";
    this.logo = require("@/assets/logo.png");
    var user = sessionStorage.getItem("user");
    if (user) {
      this.userName = user;
      this.userAvatar = require("@/assets/user.png");
    }
  }
}
</script>
<style scoped lang="scss">
.container {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  .header {
    height: 60px;
    line-height: 60px;
    background: #4b5f6e;
    color: #fff;
    .userinfo {
      text-align: right;
      padding-right: 30px;
      float: right;
      .lang-inner {
        font-size: 15px;
        cursor: pointer;
        color: #fff;
      }
      .userinfo-inner {
        font-size: 20px;
        cursor: pointer;
        padding-left: 15px;
        color: #fff;
        img {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          margin: 10px 0px 10px 10px;
          float: right;
        }
      }
    }
    .logo {
      height: 60px;
      font-size: 22px;
      padding-left: 0px;
      padding-right: 0px;
      border-color: rgba(238, 241, 146, 0.5);
      border-right-width: 1px;
      border-right-style: solid;
      background: #4b5f6e;
      text-align: left;
      img {
          width: 40px;
          height: 40px;
          border-radius: 0px;
          margin: 10px 10px 10px 10px;
          float: left;
      }
      .txt {
        color: #fff;
      }
    }
    .logo-width {
      width: 230px;
    }
    .logo-collapse-width {
      width: 65px;
    }
    .tools {
      padding-left: 10px;
      padding-right: 10px;
      text-align: center;
      width: 40px;
      height: 60px;
      line-height: 60px;
      cursor: pointer;
    }
    .hearNavBar {
      background: #4b5f6e;
      padding: 0px 0px;
      width: 100%;
      height: 60px;
      line-height: 60px;
      font-size: 29px;
      cursor: pointer;
    }
  }
  .main {
    display: flex;
    position: absolute;
    top: 60px;  
    bottom: 0px;
    overflow: hidden;
    aside {
      flex: 0 0 230px;
      width: 230px;
      .el-menu {
        height: 100%;
        text-align: left;
      }
    }
    .content-container {
      // background: #f1f2f7;
      flex: 1;
      // overflow-y: scroll;
      padding: 0px;
      .breadcrumb-container {
        height: 28px;
        background: #fff;
        border-color: rgba(38, 86, 114, 0.2);
        border-bottom-width: 1px;
        border-bottom-style: solid;
        background: rgba(99, 138, 161, 0.2);
        .breadcrumb-inner {
          padding-top: 5px;
          padding-bottom: 5px;
          padding-left: 5px;
          text-align: left;
          font-size: 18px;
          width: 100%;
          height: 100%;
          float: left;
        }
      }
      .content-wrapper {
        background-color: #fff;
        box-sizing: border-box;
      }
    }
  }
}
</style>

4.启动测试

 

选择点击切换英文，导航菜单成功切换到英文。

5.封装组件

新建components文件夹，新建LangSelector文件夹，新建index.vue

index.vue

<template>
  <el-dropdown class="lang-selector" @command="handleCommand">
    <span class="el-dropdown-link">
      <span id="language">中文</span><i class="el-icon-arrow-down el-icon--right"></i>
    </span>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="zh_cn:中文">中文</el-dropdown-item>
      <el-dropdown-item command="en_us:English">English</el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script>
  export default {
    methods: {
      // 语言切换
      handleCommand(command) {
        let array = command.split(':')
        let lang = array[0] === '' ? 'zh_cn' : array[0]
        let label = array[1]
        document.getElementById("language").innerHTML = label
        this.$i18n.locale = lang
      }
    }
  }
</script>

修改Home.vue文件

原文出处：https://www.cnblogs.com/xifengxiaoma/ 
自己整理记录。