Vue-admin-template 添加國際化
文章目錄
1.背景
在全球發展的趨勢下，
國際化，成爲各種軟件不可或缺的一部分…使用
Vue-admin-template作爲基本框架(基於Element-UI)，添加國際化插件i18n
2.開發環境
Vue-admin-template(其他應該也可以使用)element-ui: “2.4.6”vue: “2.5.17”vue-i18n: “^8.8.2”vue-router: “3.0.1”vuex: “3.0.1”
3.安裝i18n
npm i vue-i18n
4.添加語言包
①lang/index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookies from 'js-cookie'
import elementEnLocale from 'element-ui/lib/locale/lang/en' // element-ui lang
import elementZhLocale from 'element-ui/lib/locale/lang/zh-CN'// element-ui lang
import enLocale from './en'
import zhLocale from './zh'
Vue.use(VueI18n)
const messages = {
en: {
...enLocale,
...elementEnLocale
},
zh: {
...zhLocale,
...elementZhLocale
}
}
const i18n = new VueI18n({
// set locale
// options: en | zh | es
locale: Cookies.get('language') || 'en',
// set locale messages
messages
})
export default i18n
②zh.js(中文語言包)
export default {
route: {
dashboard: '首頁',
introduction: '簡述'
}
role: {
permission: '權限'
},
user: {
uname: '用戶名',
role: '角色',
sex: '性別'
}
}
可根據實際情況，自行添加擴展
③en.js(英文語言包)
export default {
route: {
dashboard: 'Dashboard',
introduction: 'Introduction'
}
role: {
permission: 'Permission'
},
user: {
uname: 'User Name',
role: 'Role',
sex: 'Sex'
}
}
5.添加`gett
ers`,便於獲取當前語言
const getters = {
......
language: state => state.app.language
}
export default getters
6.main.js中添加依賴
import ElementUI from 'element-ui' //基於Element-UI
import i18n from './lang'
Vue.use(ElementUI, {
i18n: (key, value) => i18n.t(key, value)
})
new Vue({
el: '#app',
......
i18n,
render: h => h(App)
})
7.添加語言切換下拉框組件
LangSelect/index.vue
<template>
<el-dropdown trigger="click" class="international" @command="handleSetLanguage">
<div>
<svg-icon class-name="international-icon" icon-class="language" />
</div>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item>
<el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</template>
<script>
export default {
computed: {
language() {
return this.$store.getters.language
}
},
methods: {
handleSetLanguage(lang) {
this.$i18n.locale = lang
this.$store.dispatch('setLanguage', lang)
this.$message({
message: 'Switch Language Success',
type: 'success'
})
}
}
}
</script>
8.添加切換語言下拉框到頭部中
圖標可以替換爲別的，不然顯示的是一片白色
Navbar.vue
<template>
<div class="navbar">
<hamburger :toggle-click="toggleSideBar" :is-active="sidebar.opened" class="hamburger-container"/>
<breadcrumb />
<div class="right-menu">
<template>
<lang-select class="right-menu-item hover-effect"/>
</template>
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
<i class="el-icon-caret-bottom"/>
</div>
<el-dropdown-menu slot="dropdown" class="user-dropdown">
<router-link class="inlineBlock" to="/">
<el-dropdown-item>
Home
</el-dropdown-item>
</router-link>
<el-dropdown-item divided>
<span style="display:block;" @click="logout">LogOut</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
import Breadcrumb from '@/components/Breadcrumb'
import Hamburger from '@/components/Hamburger'
import LangSelect from '@/components/LangSelect'
export default {
components: {
Breadcrumb,
Hamburger,
LangSelect
},
computed: {
...mapGetters([
'sidebar',
'avatar'
])
},
methods: {
toggleSideBar() {
this.$store.dispatch('ToggleSideBar')
},
logout() {
this.$store.dispatch('LogOut').then(() => {
location.reload() // 爲了重新實例化vue-router對象 避免bug
})
}
}
}
</script>
9.添加工具類，用於替換
i18n.js
// 翻譯router.meta。標題，用於麪包屑側邊欄tagsview
export function generateTitle(title) {
const hasKey = this.$te('route.' + title)
if (hasKey) {
// $t :this method from vue-i18n, inject in @/lang/index.js
const translatedTitle = this.$t('route.' + title)
return translatedTitle
}
return title
}
10.麪包屑中使用
就是把你之前的固定文字，改爲{{ generateTitle(item.meta.title) }}
此處的item.meta.title，就是在路由中配置的meta
一定不要忘記在methods中聲明generateTitle方法
<template>
<el-breadcrumb class="app-breadcrumb" separator="/">
<transition-group name="breadcrumb">
<el-breadcrumb-item v-for="(item,index) in levelList" :key="item.path">
<span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{ generateTitle(item.meta.title) }}</span>
<a v-else @click.prevent="handleLink(item)">{{ generateTitle(item.meta.title) }}</a>
</el-breadcrumb-item>
</transition-group>
</el-breadcrumb>
</template>
<script>
import pathToRegexp from 'path-to-regexp'
import { generateTitle } from '@/utils/i18n'
export default {
data() {
return {
levelList: null
}
},
watch: {
$route() {
this.getBreadcrumb()
}
},
created() {
this.getBreadcrumb()
},
methods: {
generateTitle,
getBreadcrumb() {
let matched = this.$route.matched.filter(item => item.name)
const first = matched[0]
if (first && first.name !== 'dashboard') {
matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
}
this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
},
pathCompile(path) {
// To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
const { params } = this.$route
var toPath = pathToRegexp.compile(path)
return toPath(params)
},
handleLink(item) {
const { redirect, path } = item
if (redirect) {
this.$router.push(redirect)
return
}
this.$router.push(this.pathCompile(path))
}
}
}
</script>
11.其他頁面使用
在你需要替換的地方，直接使用{{ $t('table.cancel') }}
注意，這裏的標籤使用的是:lable是Vue的v-bind，而不是普通label
12.注意
這裏的table.groupName，就是前面第四步中的語言包。
還有就是，路由中的文字，直接寫在route下就可以了。因爲第9步中已經封裝好了
