Vue + Element UI 前端篇（五）：国际化实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue + Element UI 前端篇（五）：国际化实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

国际化支持

1.安装依赖

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

yarn add vue-i18n

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

$ yarn add vue-i18n
yarn add v1.9.4
warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
info fsevents@1.2.4: The platform "win32" is incompatible with this module.
info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installation.
[4/5] Linking dependencies...
[5/5] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ vue-i18n@8.0.0
info All dependencies
└─ vue-i18n@8.0.0
Done in 28.19s.

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

2.添加配置

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

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

index.js

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

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

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

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

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

zh.json

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

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

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

en.json

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

{
    "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 对象中。

Vue + Element UI 前端篇（五）：国际化实现,vue.js,前端,javascript

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)
});