开发笔记:多语言国际化

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

{
"common": {
"home": "首页",
"login": "登录",
"logout": "退出登录",
"doc": "文档",
"blog": "博客",
"projectRepo": "项目",
"myMsg": "我的消息",
"config": "系统配置",
"backup": "备份",
"restore": "还原",
"backupRestore": "备份还原",
"versionName": "版本名称",
"exit": "退出"
},
"action": {
"operation": "操作",
"add": "新增",
"edit": "编辑",
"delete": "删除",
"batchDelete": "批量删除",
"search": "查询",
"loading": "拼命加载中",
"submit": "提交",
"comfirm": "确定",
"cancel": "取消",
"reset": "重置"

}
}

{
"common": {
"home": "Home",
"login": "Login",
"logout": "Logout",
"doc": "Document",
"blog": "Blog",
"projectRepo": "Project",
"myMsg": "My Message",
"config": "Config",
"backup": "Backup",
"restore": "Restore",
"backupRestore": "Backup Restore",
"versionName": "Version",
"exit": "Exit"
},
"action": {
"operation": "Operation",
"add": "Add",
"edit": "Edit",
"delete": "Delete",
"batchDelete": "Batch Delete",
"search": "Search",
"loading": "loading",
"submit": "Submit",
"comfirm": "Comfirm",
"cancel": "Cancel",
"reset": "Reset"
}
}

import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import api from ‘./http‘
import i18n from ‘./i18n‘
import global from ‘@/utils/global‘
import ElementUI from ‘element-ui‘
import ‘element-ui/lib/theme-chalk/index.css‘
import ‘font-awesome/css/font-awesome.min.css‘
Vue.use(ElementUI) // 注册使用Element
Vue.use(api) // 注册使用API模块

Vue.prototype.global = global // 挂载全局配置模块
new Vue({
el: ‘#app‘,
i18n,
router,
render: h => h(App)
})

{{$t(‘common.doc‘)}}

// 语言切换
changeLanguage(lang) {
lang === ‘‘ ? ‘zh_cn‘ : lang
this.$i18n.locale = lang
this.langVisible = false
}