Vue + Element UI 实现权限管理系统 前端篇（五）：国际化实现

国际化支持

1.安装依赖

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

cnpm install --save vue-i18n

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',
  messages: {
    'zh': require('@/assets/languages/zh.json'),
    'en': require('@/assets/languages/en.json')
  }
})

export default i18n

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

zh.json

{
    "common": {
        "home": "首页",
        "login": "登录",
        "exit": "退出"
    },
    "sys": {
        "userMng": "用户管理",
        "deptMng": "机构管理",
        "roleMng": "角色管理",
        "menuMng": "菜单管理",
        "logMng": "日志管理"
    }
}

en.json

{
    "common": {
        "home": "Home",
        "login": "Login",
        "exit": "Exit"
    },
    "sys": {
        "userMng": "User Manage",
        "deptMng": "Dept Manage",
        "roleMng": "Role Manage",
        "menuMng": "Menu Manage",
        "logMng": "Log Manage"
    }
}

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)

new Vue({
  el: '#app',
  i18n,
  router,
  render: h => h(App)
});

3.字符引用

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

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

3.切换菜单

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

注意：本文归作者所有，未经作者允许，不得转载